Supposons que vous ayez un formulaire dont les valeurs sont chargées à partir de la base de données. Comment initialisez-vous ng-model?
Exemple:
<input name="card[description]" ng-model="card.description" value="Visa-4242">Dans mon contrôleur, $ scope.card n'est pas défini au départ. Y a-t-il un autre moyen de faire quelque chose comme ça?
$scope.card = {
description: $('myinput').val()
}Réponses:
C'est une erreur courante dans les nouvelles applications angulaires. 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 ne rende entièrement le HTML, tant mieux.
Idéalement, vous souhaitez envoyer vos modèles Angular HTML, puis extraire vos valeurs via $ http dans JSON et les mettre dans votre portée.
Donc, si possible, faites ceci:
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 mettre dans une variable globale et y accéder avec $ window:
Dans l'en-tête de votre page, vous écrivez:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>Et puis dans votre contrôleur, vous l'obtiendrez comme ceci:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});J'espère que cela aide.
Si vous ne pouvez pas retravailler votre application pour faire ce que @blesh suggère (extraire les données JSON 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'">ng-initest très utile lors de la définition de valeurs à partir de code-behind / postback, par exemple <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Un peu moche? Oui, mais fait l'affaire et résout un mal de tête d'intégration dans le processus.
C'est un correctif manifestement manquant, mais facilement ajouté pour AngularJS. Écrivez simplement 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);
}
]
};
});controllerpour votre directive, et pourquoi ne pas utiliser la linkméthode ?. Je suis novice chez angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()pour qu'il fonctionne avec des éléments sélectionnés.
À mon humble avis, la meilleure solution est la directive @Kevin Stone, mais j'ai dû la mettre à niveau pour qu'elle fonctionne dans toutes les conditions (par exemple, sélectionnez, 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 ce billet de blog https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- champs-attributs / .
J'ai une approche simple, car j'ai des validations et des masques lourds dans mes formulaires. J'ai donc utilisé jquery pour récupérer ma valeur et déclencher l'événement "change" pour les validations:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Comme d'autres l'ont souligné, l'initialisation des données sur les vues n'est pas une bonne pratique. Cependant, l'initialisation des données sur les contrôleurs est recommandée. (voir http://docs.angularjs.org/guide/controller )
Pour que tu puisses écrire
<input name="card[description]" ng-model="card.description">et
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});De cette façon, les vues ne contiennent pas de données et le contrôleur initialise la valeur pendant le chargement des valeurs réelles.
Si vous aimez l'approche de Kevin Stone ci-dessus https://stackoverflow.com/a/17823590/584761, envisagez une approche plus simple en écrivant des directives pour des balises spécifiques telles que 'input'.
app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel) {
val = attrs.value || element.text();
$parse(attrs.ngModel).assign(scope, val);
}
}
}; });Si vous suivez cette voie, vous n'aurez pas à vous soucier d'ajouter ng-initial à chaque balise. Il définit automatiquement la valeur du modèle sur l'attribut value de la balise. Si vous ne définissez pas l'attribut value, il sera par défaut une chaîne vide.
Voici une approche centrée sur le serveur:
<html ng-app="project">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
// Create your module
var dependencies = [];
var app = angular.module('project', dependencies);
// Create a 'defaults' service
app.value("defaults", /* your server-side JSON here */);
// Create a controller that uses the service
app.controller('PageController', function(defaults, $scope) {
// Populate your model with the service
$scope.card = defaults;
});
</script>
<body>
<div ng-controller="PageController">
<!-- Bind with the standard ng-model approach -->
<input type="text" ng-model="card.description">
</div>
</body>
</html>C'est la même idée de base que les réponses les plus populaires à cette question, à l'exception de $ provide.value enregistre un service qui contient vos valeurs par défaut.
Donc, sur le serveur, vous pourriez avoir quelque chose comme:
{
description: "Visa-4242"
}Et mettez-le dans votre page via la technologie côté serveur de votre choix. Voici un aperçu: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Celui-ci est une version plus générique des idées mentionnées ci-dessus ... Il vérifie simplement s'il y a une valeur dans le modèle, et sinon, il définit la valeur du modèle.
JS:
function defaultValueDirective() {
return {
restrict: 'A',
controller: [
'$scope', '$attrs', '$parse',
function ($scope, $attrs, $parse) {
var getter = $parse($attrs.ngModel);
var setter = getter.assign;
var value = getter();
if (value === undefined || value === null) {
var defaultValueGetter = $parse($attrs.defaultValue);
setter($scope, defaultValueGetter());
}
}
]
}
}HTML (exemple d'utilisation):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopel'appel à getter()- j'espère que cela clarifiera les choses pour quiconque essaie cela!
J'ai essayé ce que @Mark Rajcok a suggéré. Il fonctionne pour les valeurs de chaîne (Visa-4242). Veuillez vous référer à ce violon .
Du violon:
La même chose qui est faite dans le violon peut être faite en utilisant ng-repeat, ce que tout le monde pourrait recommander. Mais après avoir lu la réponse donnée par @Mark Rajcok, je voulais juste essayer la même chose pour un formulaire avec un tableau de profils. Les choses fonctionnent bien jusqu'à ce que j'aie le $ scope.profiles = [{}, {}]; code dans le contrôleur. Si je supprime ce code, j'obtiens des erreurs. Mais dans des scénarios normaux, je ne peux pas imprimer $scope.profiles = [{},{}]; lorsque j'imprime ou que je fais écho au HTML du serveur. Sera-t-il possible d'exécuter ce qui précède, de la même manière que @Mark Rajcok l'a fait pour les valeurs de chaîne comme <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, sans avoir à faire écho à la partie JavaScript du serveur.
Ajout de la prise en charge de l'élément sélectionné à Ryan Montgomery "fix"
<select class="input-control" ng-model="regCompModel.numberOfEmployeeId" ng-initial>
<option value="1af38656-a752-4a98-a827-004a0767a52d"> More than 500</option>
<option value="233a2783-db42-4fdb-b191-0f97d2d9fd43"> Between 250 and 500</option>
<option value="2bab0669-550c-4555-ae9f-1fdafdb872e5"> Between 100 and 250</option>
<option value="d471e43b-196c-46e0-9b32-21e24e5469b4"> Between 50 and 100</option>
<option value="ccdad63f-69be-449f-8b2c-25f844dd19c1"> Between 20 and 50</option>
<option value="e00637a2-e3e8-4883-9e11-94e58af6e4b7" selected> Less then 20</option>
</select>
app.directive('ngInitial', function () {
return {
restrict: 'A',
controller: ['$scope', '$element', '$attrs', '$parse', function ($scope, $element, $attrs, $parse) {
val = $attrs.sbInitial || $attrs.value || $element.val() || $element.text()
getter = $parse($attrs.ngModel)
setter = getter.assign
setter($scope, val)
}]
}});