AngularJs: Binding ng-modello da un elenco di pulsanti di opzione

Nel tentativo di associare il valore selezionato in un elenco di pulsanti di opzione per un ng-modelAngularJs: Binding ng-modello da un elenco di pulsanti di opzione

ho:

<!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>

Per il mio regolatore:

(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; 
    }); 
}());

Nella prima sezione, ho provato a ng-ripeti tutti gli occurrenceOptions e li leghiamo tutti allo stesso modello. Tuttavia, ogni volta che seleziono qualcosa il valore selectedOccurrence non cambia.

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

senza la ng-repeat e solo digitando tutti i pulsanti di opzione, sono in grado di farlo funzionare. Perché la versione ng-repeat non funziona?

fonte

2016-06-24 Rhs

Il motivo dietro non funziona è, si sta utilizzando ng-repeat & variabile in esso ng-model variabile. Il modo in cui funziona ng-repeat consiste nel creare un nuovo ambito figlio (prototipicamente ereditato) in ogni iterazione della raccolta. Quindi lo ng-model che risiede nel modello ng-repeat appartiene all'ambito appena creato. Qui ng-model="selectedOccurrence" creare variabile di ambito selectedOccurrence su ciascuna iterazione di ng-repeat.

Per superare tale problema è necessario seguire dot rule durante la definizione del modello in AngularJS

Markup

<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>

Codice

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

Demo Plunkr

O Un altro modo preferito sarebbe utilizzando controllerAs modello mentre dichiarano controllore (uso this anziché $scope all'interno controllore).

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

fonte

2016-06-24 19:48:21

AngularJs: Binding ng-modello da un elenco di pulsanti di opzione

risposta

Problemi correlati