角 - ngClass被添加到每個被點擊的單選按鈕（而不是僅僅一個點擊）

Question

在我angular應用我使用ng-repeat產生幾個radio按鈕，最終的目的是增加choiceSelected類（ngClass顏色造型）至點擊radio輸入的label。我可以將樣式添加到單擊的按鈕，但該樣式添加到其他每個點擊的radio按鈕，我最終得到5個彩色標籤。不明白爲什麼。

下面是HTML代碼：

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

看評論裏面的線條，清楚地告訴你該複選框（$指數）的值被綁定到器isChecked變量。

通過你，條件在納克級的==器isChecked $指數是相同的所有元素，並因此類適用於所有單選按鈕。

如果你可以更新Json的questionObject，可以給你另一種選擇。

假設questionObject包含以下JSON

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

您可以使用下面的代碼，使你的結果實現

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

的方法selectAnswer應該讓你的工作變得簡單。使用此

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

LIVE DEMO

注：在你的代碼的HTML格式的selectAnswer方法調用傳遞 questionObject完全

更新1

原因手動定義器isChecked

層的外觀爲的值的範圍器isChecked因爲你已經在