html - ng-repeat 中的条件 CSS 类不起作用

Question

如果检查单选按钮的条件变为真，但它不起作用，我正在尝试将 css 类应用于标签。

示例代码

<ul style="font-size: 100%;font: inherit;">
        <li  style="margin:10px 0 0 0;" ng-repeat="condition in sampleArray">
             <label class="radio" ng-class="{checked: someCodition.conditionId == condition.conditionId}">  
                      <span class="icon"></span><span class="icon-to-fade"></span>                                  
                        <input type="radio" ng-model="previewContentCondition" ng-value="condition" ng-change="setPreviewContentFromCondition()">
                        <span ng-bind="condition.conditionName"></span>                                                 
            </label>
        </li>                               
</ul>

我试过这样改变，但这也行不通。

<ul style="font-size: 100%;font: inherit;">
    <li  style="margin:10px 0 0 0;" ng-repeat="condition in sampleArray">
         <label class="{{someCodition.conditionId == condition.conditionId ? 'radio ' : 'radio checked' }}">    
             <span class="icon"></span><span class="icon-to-fade"></span>                                   
             <input type="radio" ng-model="previewContentCondition" ng-value="condition" ng-change="setPreviewContentFromCondition()">
         <span ng-bind="condition.conditionName"></span>                                                    
         </label>
    </li>                               
</ul>

有什么办法吗？如果我直接应用 css，它工作正常。

编辑

如果我执行 someCodition.conditionId == 1，类将应用于所有 radio 标签。

Answer 1

1) 您需要为单选按钮命名。如果您为所有单选按钮指定相同的名称，那么一次只会点击一个。

2) 改为使用 ng-class。

3) 将previewContentCondition 放入对象$scope.myobj.previewContentCondition 中。 ng-repeat 有自己的作用域，单击单选按钮时原始值不会进入模型。

4) 为单选按钮赋予唯一值，这样如果它被选中，您就可以进入模型。我已经使用了 $index 可以像 ng-repeat="condition in sampleArray track by $index"

我做了一些改动。请参阅下面的工作代码:

    <ul style="font-size: 100%;font: inherit;">
       {{myobj.previewContentCondition}}
    <li  style="margin:10px 0 0 0;" ng-repeat="condition in sampleArray track by $index">
         <label ng-class="{'classcolor':$index == myobj.previewContentCondition}">    
             <span class="icon"></span><span class="icon-to-fade"></span>   
             <input type="radio" name="test" ng-model="myobj.previewContentCondition" ng-checked="true" type="radio" value="{{$index}}" >
         <span ng-bind="condition.conditionName"></span>                                                    
         </label>
    </li>                               
</ul>

查看工作 plnkr here .