AngularJS: Bindung ng-Modell auf eine Liste von Radiobuttons

Im Versuch, den ausgewählten Wert in einer Liste von Optionsfeldern zu einem ng-modelAngularJS: Bindung ng-Modell auf eine Liste von Radiobuttons

zu binden, die ich habe:

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

Für meinen Controller:

Im ersten Abschnitt habe ich versucht, alle occurrenceOptions ng-repeat und binden sie alle an das gleiche Modell. Jedes Mal, wenn ich etwas wähle, ändert sich der Wert selectedOccurrence nicht. plunkr

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

ohne die ng-repeat und einfach alle Radiobuttons eingeben aus, ich bin in der Lage, dies zu erhalten, zu arbeiten. Warum funktioniert die ng-repeat Version nicht?

Quelle

2016-06-24 Rhs

Der Grund dafür ist nicht arbeiten ist, verwenden Sie ng-repeat & Sie definieren ng-model Variable darin. Die Art, wie ng-repeat funktioniert, ist, dass es bei jeder Iteration der Sammlung einen neuen Kindbereich (prototypisch geerbt) erstellt. So die ng-model, die in ng-repeat Vorlage residiert, gehört dieser neu erstellte Bereich. Hier ng-model="selectedOccurrence" erstellen Sie selectedOccurrence Scope-Variable bei jeder Iteration von ng-repeat.

zu überwinden, ein solches Problem Sie dot rule bei der Definition Modell 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>

-Code

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

Demo Plunkr

folgen müssen

OR Eine andere bevorzugte Art und Weise würde controllerAs Muster verwenden, während Controller deklarieren (Verwendung this statt $scope innerhalb Controller).

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

Quelle

2016-06-24 19:48:21

AngularJS: Bindung ng-Modell auf eine Liste von Radiobuttons

Antwort

Verwandte Themen