Warum funktionieren die Eingänge nicht richtig mit ng-repeat

Question

Könnte mir jemand erklären, warum ich in diesem einfachen Beispiel den aktuell gewählten Radio-Button nicht bekommen kann. Ich versuche dynamisch die Radio-Buttons mit einer ng-repeat-Direktive zu generieren und lasse den aktuellen radio-Button mit ng-model auswählen. So:

Vorlage:

<div ng-repeat="kind in movieKinds"> 
    <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br> 
</div> 
Selected Movie :{{kindSelected}} 

Controller:

mymodule.controller('MainCtrl', [ '$scope',function ($scope) { 

    $scope.movieKinds = [ 
     {'name' : 'Action', 'movies' : ['Action#1', 'Action#2', 'Action#3']}, 
     {'name' : 'Comedy', 'movies' : ['Comedy#1', 'Comedy#2', 'Comedy#3']}, 
     {'name' : 'Drama', 'movies' : ['Drama#1', 'Drama#2']}, 
     {'name' : 'Horror', 'movies' : ['Horror#1']} 
    ]; 

}]); 

Answer 1

Da ng-repeat einen Umfang neuen Kind tut erstellen (geerbt prototypisch) bei jeder Iteration, wenn es eine Vorlage auf, wo immer ng-repeat Richtlinie wiederholt wurde platziert.

So was passiert, wenn ng-repeat Rahmen eines neuen prototypisch geerbt Kind schafft?

In dem Kind Umfang trägt es alle Eigenschaften, in denen primitive Eigenschaft Anfangswert beim Anlegen Umfang Kind genommen & Objekts Werte mit den Referenzen entnommen werden so Update im Umfang Wert geordneten in geordneten Bereich Wert & vice versa aktualisieren .

Hier in Ihrem Fall hatten Sie ng-model="kindSelected" Variable innerhalb ng-repeat so dass Umfang variabel innerhalb des ng-repeat Bereich erstellen konnte und nicht verfügbar außerhalb ng-repeat Richtlinie.

Um ein solches Problem zu beheben, könnten Sie object verwenden, während Sie ng-model definieren, so dass Sie Dot rule bei der Definition ng-model folgen können. Das heißt, Sie könnten ein Objekt mit dem Namen $scope.model innerhalb des Controllers & definieren und dann die Eigenschaft kindSelected hinzufügen, damit der Wert bei Auswahl des Kontrollkästchens aktualisiert wird.

Markup

<div ng-repeat="kind in movieKinds"> 
    <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br> 
</div> 
Selected Movie :{{model.kindSelected}} 

-Code

$scope.model = {}; 

---

Der andere Weg, um dieses Problem zu beheben ist controllerAs Syntax zu verwenden, die zugehörige Alias-Controller so den Umfang Hierarchie verwenden Problem tritt bei HTML nicht auf. Welche Controller-Variable Sie auch verwenden möchten, Sie können diesen Alias ​​des Controllers verwenden.

Answer 2

Wie auf Pankaj Parkar's answer gezeigt, erstellt ng-repeat sein eigenes $ scope. Sie müssen also auf den $ parent $ scope verweisen.

können Sie den folgenden Aufbau verwenden die geprüft Wert zu erhalten:

<input type="radio" name="movies" ng-value="kind" ng-model="$parent.kindSelected"> {{kind.name}}<br>