Disons que vous avez un formulaire dont les valeurs sont chargées depuis la base de données. Comment initialiser le ng-model ?
Exemple :
<input name="card[description]" ng-model="card.description" value="Visa-4242">Dans mon contrôleur, $scope.card est indéfini au départ. Existe-t-il un autre moyen que de faire quelque chose comme ça ?
$scope.card = {
description: $('myinput').val()
}
Si vous ne pouvez pas retravailler votre application pour faire ce que @blesh suggère (tirer des données JSON vers le bas avec $http ou $resource et remplir $scope), vous pouvez utiliser ng-init à la place :
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Il s'agit d'une erreur courante dans les nouvelles applications Angular. Vous ne voulez pas écrire vos valeurs dans votre HTML sur le serveur si vous pouvez l'éviter. En fait, si vous pouvez éviter que votre serveur rende entièrement le HTML, c'est encore mieux.
Idéalement, vous voulez envoyer vos modèles HTML Angular, puis récupérer vos valeurs via $http en JSON et les placer dans votre scope.
Donc, si c'est possible, faites-le :
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />Si vous devez absolument rendre vos valeurs dans votre HTML à partir de votre serveur, vous pouvez les placer dans une variable globale et y accéder avec $window :
Dans l'en-tête de votre page, vous écrirez :
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>Et ensuite dans votre contrôleur vous l'obtiendrez comme ça :
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});J'espère que cela vous aidera.
Il s'agit d'une correction manifestement manquante, mais facile à ajouter pour AngularJS. Il suffit d'écrire une directive rapide pour définir la valeur du modèle à partir du champ de saisie.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Voici ma version :
var app = angular.module('forms', []);
app.directive('ngInitial', function() {
return {
restrict: 'A',
controller: [
'$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
var getter, setter, val;
val = $attrs.ngInitial || $attrs.value;
getter = $parse($attrs.ngModel);
setter = getter.assign;
setter($scope, val);
}
]
};
});
A mon avis, la meilleure solution est la directive @Kevin Stone, mais j'ai dû la mettre à jour pour qu'elle fonctionne dans toutes les conditions (par exemple select, textarea), et celle-ci fonctionne à coup sûr :
angular.module('app').directive('ngInitial', function($parse) {
return {
restrict: "A",
compile: function($element, $attrs) {
var initialValue = $attrs.value || $element.val();
return {
pre: function($scope, $element, $attrs) {
$parse($attrs.ngModel).assign($scope, initialValue);
}
}
}
}
});
Vous pouvez utiliser une directive personnalisée (avec prise en charge de textarea, select, radio et checkbox), consultez cet article de blog. http://blog.glaucocustodio.com/2014/10/20/init-ng-model-from-form-fields-attributes/ .
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
