ng-repeat中的條件CSS類不起作用

我試圖應用一個css類來標記，如果條件成爲真使選中單選按鈕，但它不工作。ng-repeat中的條件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，類是越來越適用於所有的無線標籤。

來源

2017-02-10 Ali786

使用單個大括號和ng級'ng-class = {condition}' –

控制檯中的任何錯誤？當你說「不工作」時，你的意思是不加班？ –

@ValentinCoudert，我沒有得到任何錯誤，類沒有得到應用到標籤 – Ali786

裹''周圍的類名：

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

來源

2017-02-10 08:55:04

我已經試過了.. – Ali786

您的表達式是如何驗證的？someCodition.conditionId == condition.conditionId？ –

這個條件返回值爲true，我通過打印條件值來檢查它。 – Ali786

1）你必須提供姓名您的單選按鈕。如果你給所有的單選按鈕賦予相同的名字，那麼只有一個將被單擊一次。

2）改用ng-class。

3）將previewContentCondition放入對象$scope.myobj.previewContentCondition。當單選按鈕單擊時，ng-repeat使其自己的範圍和原始值不會進入模型。

4）賦予單選按鈕獨特的價值，那麼如果它被檢查，你可以進入模型。我已經使用$索引，可以得到像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。

來源

2017-02-10 12:19:59 vikas

ng-repeat中的條件CSS類不起作用

回答

相關問題