ng-repeat의 조건부 CSS 클래스가 작동하지 않습니다.

Question

라디오 버튼을 선택했지만 상태가 작동하지 않는 경우 조건이 true가되면 레이블에 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) 당신은 당신의 라디오 버튼에 이름을 부여해야합니다. 모든 라디오 버튼에 동일한 이름을 지정하면 한 번에 하나만 클릭됩니다.

2) 대신 ng-class를 사용하십시오.

3) $scope.myobj.previewContentCondition에 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 작업 참조 : 아래의 작업 코드를 참조하십시오.