Angular - ngClass 被添加到每个点击的单选按钮（而不是只点击一个）

Question

在我的 angular 应用程序中，我使用 ng-repeat 生成几个 radio 按钮，最终目标是添加一个 choiceSelected class ( 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>

看看评论里面的行，清楚地告诉你复选框的值（$index）绑定到isChecked变量。

你的 condition in ng-class isChecked==$index 所有元素都是一样的所以 class 应用于所有单选按钮。

如果你可以更新 questionObject 的 Json ，可以给你替代选择。

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

NOTE: In your code the selectAnswer method call in HTML passes the questionObject fully

更新 1

手动定义isChecked的原因

Angular 在范围内查找 isChecked 的值，因为您使用了 ng-class 在

Angular - ngClass 被添加到每个点击的单选按钮（而不是只点击一个）

Angular - ngClass being added to each clicked radio button (instead of ONLY clicked one)

angularjs

ng-class