web-dev-qa-db-fra.com

Affectation de ng-model aux cases à cocher générées par ng-repeat

J'ai configuré un json contenant une liste de pays avec un identifiant et un code de pays attachés:

Cela ressemble à ceci:

$scope.countries = [
  {"name":"Afghanistan","id":"AFG","country-code":"004"},
  {"name":"Åland Islands","id":"ALA","country-code":"248"},
  {"name":"Albania","id":"ALB","country-code":"008"},
  {"name":"Algeria","id":"DZA","country-code":"012"}
]

J'utilise ensuite la directive ng-repeat Pour créer des entrées de case à cocher pour chaque pays.

<div ng-repeat="country in countries">
      <label><input type="checkbox" ng-model="{{country.id}}" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>

Cependant, lorsque j'exécute le code, j'obtiens uniquement les éléments suivants à afficher:

Case à cocher Emplacement ici {{country.name}}

Si je supprime la partie ng-model De la répétition, mes cases à cocher génèrent très bien mais j'ai besoin d'un ng-model Unique à attacher à chaque case à cocher

ng-model="{{country.id}}"

Comment dois-je procéder pour attacher une valeur ng-model Unique?

Cette réponse ( Generate ng-model inside ng-repeat ) ne fournit pas de valeur unique ng-model

angularjsangularjs-ng-repeatng-repeat
12
ocajian

Je vais vous suggérer, tilisez:

<div ng-repeat="country in countries">
    <label><input type="checkbox" ng-model="myCountry.selected[country.id]" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>

</div>

</div>
{{myCountry.selected}}

JS:

$scope.myCountry = {
    selected:{}
};
25
Ved