Javascript Angular js ng class错误条件在ng repeat中不起作用

如果选择了该收音机，我想突出显示li。 在ng repeat内，ng类真实条件有效，但虚假条件无效，请检查下面的代码

<div ng-init="friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
      ]">
        <ul class="example-animate-container">
          <li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[radioBox==friend.name]">
             <input type="radio" name="friends" ng-model="radioBox" value="{{friend.name}}" />
          </li>
        </ul>
      </div>

如果表达式的计算结果为对象，则对于具有truthy值的对象的每个键值对，相应的键将用作类名

如果表达式的计算结果为对象，则对于具有truthy值的对象的每个键值对，相应的键将用作类名

这是因为ng repeat为每个li元素创建了一个新的子作用域，因此每个li元素在其自己的作用域中将有自己的radioBox值

有关更多详细信息，请阅读

你可以通过一个简单的方法来避免这个问题。在ng模型中，例如使用model.radioBox，如下所示：

<li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[model.radioBox==friend.name]">
  <input type="radio" name="friends" ng-model="model.radioBox" value="{{friend.name}}" />
</li>

示例：这是因为ng repeat为每个li元素创建了一个新的子作用域，因此每个li元素在自己的作用域中都有自己的radioBox值

有关更多详细信息，请阅读

你可以通过一个简单的方法来避免这个问题。在ng模型中，例如使用model.radioBox，如下所示：

<li class="animate-repeat" ng-repeat="friend in friends" ng-class="{true:'hightlight',false:''}[model.radioBox==friend.name]">
  <input type="radio" name="friends" ng-model="model.radioBox" value="{{friend.name}}" />
</li>

示例Plunker：

$scope.model = {
  radioBox: undefined
};