web-dev-qa-db-fra.com

AngularJs: liaison du modèle ng à une liste de boutons radio

Im essayant de lier la valeur sélectionnée dans une liste de boutons radio à un ng-model

J'ai:

<!DOCTYPE html>

<html ng-app="testApp">
    <head>
        <script src="./bower_components/angular/angular.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body ng-controller="testController">
        <form>
            <div ng-repeat="option in occurrenceOptions">
                <input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence" /><label>{{ option }}</label>
            </div>
        </form>
        <div>The selected value is : {{ selectedOccurrence }}</div>

        <!-- This works -->
        <input type="radio" ng-model="selected2" ng-value="'1'"> 1
        <input type="radio" ng-model="selected2" ng-value="'2'"> 2
        <input type="radio" ng-model="selected2" ng-value="'3'"> 3

        <div>This selected value is : {{ selected2 }} </div>
    </body>
</html>

Pour mon contrôleur:

(function () {

    var app = angular.module('testApp', []);

    app.controller('testController', function($scope) {
        $scope.occurrenceOptions = [];

        $scope.occurrenceOptions.Push('previous');
        $scope.occurrenceOptions.Push('current');
        $scope.occurrenceOptions.Push('next');

        $scope.selected2;
    });
}());

Dans la première section, j'ai essayé de ng-répéter tous les occurrenceOptions et de les lier tous au même modèle. Cependant, chaque fois que je sélectionne quelque chose, la valeur selectedOccurrence ne change pas.

Voir plunkr: https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview

sans le ng-repeat et en tapant simplement tous les boutons radio, je suis en mesure de faire fonctionner cela. Pourquoi est-ce que ng-repeat la version ne fonctionne pas?

javascriptangularjsangularjs-scopeangularjs-controller
10
Rhs

La raison derrière cela ne fonctionne pas est que vous utilisez ng-repeat & vous définissez ng-model variable dedans. Le chemin ng-repeat fonctionne, il crée une nouvelle portée enfant (héritée du prototype) à chaque itération de la collection. Alors le ng-model qui réside dans ng-repeat modèle, appartient à la portée nouvellement créée. Ici ng-model="selectedOccurrence" créer selectedOccurrence variable d'étendue à chaque itération de ng-repeat.

Pour surmonter un tel problème, vous devez suivre dot rule lors de la définition du modèle dans AngularJS

Annotation 

<body ng-controller="testController">
  <form>
    <div ng-repeat="option in occurrenceOptions track by $index">
      <input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence" />
      <label>{{ option }}</label>
    </div>
  </form>
  <div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>

Code 

$scope.model = {}; //defined a model object
$scope.model.selectedOccurrence = 'current'; //and defined property in it

Démo Plunkr

OU Une autre manière préférée serait d'utiliser le modèle controllerAs lors de la déclaration du contrôleur (utilisez this au lieu de $scope à l'intérieur du contrôleur).

[~ # ~] html [~ # ~] 

<body ng-controller="testController as vm">
    <form>
        <div ng-repeat="option in vm.occurrenceOptions">
            <input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence" /><label>{{ option }}</label>
        </div>
    </form>
</body>

ControllerAs Demo

22
Pankaj Parkar