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をすれば、クラスはすべての無線ラベルに

編集

適用なっています。

Answer 1

ラップ''クラス名周り：

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

Answer 2

1）あなたは、あなたのラジオボタンに名前を与える必要があります。すべてのラジオボタンに同じ名前を付けると、一度に1つだけがクリックされます。

2）代わりにng-classを使用してください。

3）$scope.myobj.previewContentConditionに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を参照してください。