Angular - ngClass zu jedem geklickt Optionsfeld hinzugefügt wird (statt nur einen geklickt)

Question

In meinem angular app ich ng-repeat bin mit mehreren radio Tasten zu erzeugen, das ultimative Ziel eine choiceSelected Klasse (ngClass Farbe Styling) hinzuzufügen, ist zu der label des angeklickten radio Eingangs. Ich kann den Stil der geklickten Schaltfläche hinzufügen, ABER dieser Stil wird zu jeder anderen geklickt radio Schaltfläche hinzugefügt und ich am Ende mit 5 farbigen Etiketten. Kann nicht verstehen warum.

Hier ist der HTML-Code:

<div class="row" ng-repeat="obj in questionObject.choices"> 
    <div class="radio"> 
    <label class="choice" ng-class="{'choiceSelected': isChecked==$index}"> 
     <input type="radio" name="optradio" ng-model="isChecked" ng-value="$index" ng-click="selectAnswer($index,questionObject)">{{obj.body}}</label> 
    </div> 
</div> 

Answer 1

<div class="row" ng-repeat="obj in questionObject.choices"> 
    <div class="radio"> 
     <label class="choice" ng-class="{'choiceSelected': isChecked==$index}"> 
     <input type="radio" 
      name="optradio" 
      /*********************************************/ 
      ng-model="isChecked" 
      ng-value="$index" 
      /*********************************************/ 
      ng-click="selectAnswer($index,questionObject)">{{obj.body}} 
     </label> 
    </div> 
</div> 

Schauen Sie sich die Linien in den Kommentaren, sagt deutlich, dass Ihr Wert der Checkbox ($ index) an die verbindlich isChecked Variable .

Durch Ihre, Zustand in ng-Klasse isChecked == $ index es für alle Elemente gleich ist, und so wird die Klasse für alle Optionsfelder angewendet.

Wenn Sie die JSON von questionObject aktualisieren können, können Sie alternative Option geben.

Unter der Annahme, dass questionObject enthält folgende json

[{ 
    "body": "abc" 
    }, { 
    "body": "def" 
    }, { 
    "body": "aghi" 
    } ] 

können Sie den Code unten verwenden Ihr Ergebnis erzielen

<div class="row" ng-repeat="obj in questionObject track by $index" > 
    <div class="radio" > 
     <label class="choice" 
     ng-class="{'choiceSelected': isChecked==$index}"> 
      <input type="radio" 
     name="optradio" 
     ng-value="obj.body" 
     ng-click="selectAnswer($index,obj)"> 
     {{obj.body}} 
     </label> 
</div> 

Die Methode selectAnswer machen Ihre Arbeit einfach machen. Verwenden Sie diese

$scope.selectAnswer=function(number,obj) 
    { 
    $scope.isChecked=number; 
    } 

LIVE DEMO

HINWEIS: In Ihrem Code die selectAnswer Methodenaufruf in HTML übergibt die questionObject voll

Update 1

Grund für die manuelle Definition von isChecked

Angular Looks für den Wert von isChecked im Rahmen, weil Sie ng-Klasse im