web-dev-qa-db-fra.com

AngularJS: le modèle ng ne lie pas à ng-vérifié pour les cases à cocher

Je me suis référé à cela avant de poser cette question.

AngularJs ne lie pas ng-vérifié avec ng-model

Si ng-checked est évalué à true du côté html, le ng-model n'est pas mis à jour. Je ne peux pas ng-repeat comme suggéré dans la question ci-dessus, car je dois utiliser un style pour chaque case à cocher.

Voici le plunker que j'ai créé pour illustrer mon problème.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Pour voir ce que je veux, s'il vous plaît ouvrez la console, et cliquez simplement sur le bouton Submit. S'il vous plaît ne cochez aucune case.

Merci d'avance!

angularjsangularjs-ng-modelangularjs-ng-checked
77
Abilash

ngModel et ngChecked ne sont pas destinés à être utilisés ensemble.

ngChecked attend une expression. Ainsi, en disant ng-checked="true", vous dites en gros que la case à cocher sera toujours cochée par défaut.

Vous devriez pouvoir simplement utiliser ngModel, lié à une propriété booléenne sur votre modèle. Si vous voulez autre chose, vous devez soit utiliser ngTrueValue et ngFalseValue (qui ne prennent en charge que les chaînes pour le moment), soit écrire votre propre directive.

Qu'est-ce que vous essayez de faire exactement? Si vous souhaitez simplement que la première case à cocher soit cochée par défaut, vous devez modifier votre modèle - item1: true,.

Modifier: vous n'êtes pas obligé de soumettre votre formulaire pour déboguer l'état actuel du modèle. En fait, vous pouvez simplement importer {{testModel}} dans votre code HTML (ou <pre>{{testModel|json}}</pre>). De plus, vos attributs ngModel peuvent être simplifiés en ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

122
Langdon

Vous pouvez utiliser ng-value-true pour indiquer à angular que votre modèle-ng est une chaîne.

Je ne pourrais obtenir que ng-true-value fonctionne si j’ajoutais les guillemets supplémentaires comme suit (comme indiqué dans le document officiel Angular _ - https://docs.angularjs.org/api/ng/input/input% 5Bcheckbox% 5D )

ng-true-value="'1'"
11
JRT

Peut déclarer que l'in ng-init se concrétise

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

Et vous pouvez sélectionner le premier et le premier objet également affiché ici true, false, flase

1
Naveen Kumar

Ce que vous pourriez faire, c’est utiliser ng-repeat en transmettant la valeur de tout ce que vous parcourez sur le ng-checked et à partir de là, en utilisant ng-class pour appliquer vos styles en fonction du résultat.

J'ai fait quelque chose de similaire récemment et cela a fonctionné pour moi.

1
Scott

Les directives ng-model et ng-checked ne doivent pas être utilisées ensemble

De la documentation:

ngChecked

Définit l'attribut vérifié sur l'élément, si l'expression à l'intérieur de ngChecked est vérité.

Notez que cette directive ne doit pas être utilisée avec ngModel, car cela peut entraîner un comportement inattendu.

- Référence API de la directive AngularJS ng-vérifiée

Définissez plutôt la valeur initiale souhaitée à partir du contrôleur:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };
0
georgeawg