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，则类将应用于所有无线电标签。

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。

Answer 2

围绕班级名称包裹''：

<label class="radio" ng-class="{'checked': someCodition.conditionId == condition.conditionId}">

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

2 个答案: