2014-06-23 3 views
1

:라디오 그룹에는 중첩 된 모델 바인딩 작업을하지 ngDisabled - AngularJS와 나는 두 가지 방법으로 데이터가이 형식의 객체의 배열 인 모델을 사용하여 바인딩을 구현하기 위해 노력하고

$rootScope["bBoxProps"] =[{ 
         "bType": "sBusinessType", 
         "id":"sBusinessType", 
         "title":"business", 
         "options":[ 
            { 
             "optId":"nyi", 
             "name":"nyi", 
             "isSelected":true, 
             "isDisabled":false, 
             "isInvalid":false 
            }, 
            { 
             "optId":"local", 
             "name":"local", 
             "isSelected":false, 
             "isDisabled":false, 
             "isInvalid":false 
            } 
            ], 
         "disabled":false, 
         "invalid":false 
         },{...},{...}]; 

두 가지의 라디오 그룹을 ngRepeat 내의 라디오 버튼은 아래와 같이 다음 "isDisabled"서브 옵션이 라디오 버튼에 결합되지 않은 것을 제외하고

<div class="buyBox" id="{{bBox.id}}" ng-repeat="bBox in bBoxProps" ng-class="{disabledBb: bBox.disabled, invalidBb: bBox.invalid}"> 
      <div class="bbTitle"><h3>{{bBox.title | uppercase}}</h3></div> 
      <div class="bbSelect"> 
       <div class="bbSelectTop bbSelectOpt"> 
        <input type="radio" name="{{bBox.id}}" id="{{bBox.options[0].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[0])" ng-checked="bBox.options[0].isSelected" ng-disabled="bBox.options[0].isDisabled==true" ng-class="{invalidBbOpt: bBox.options[0].isInvalid}"/> 
        <label for="{{bBox.options[0].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[0].name | uppercase}}</div></label> 
       </div> 
       <div class="bbSelectBottom bbSelectOpt"> 
        <input type="radio" name="{{bBox.id}}" id="{{bBox.options[1].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[1])" ng-checked="bBox.options[1].isSelected" ng-disabled="bBox.options[1].isDisabled==true" ng-class="{invalidBbOpt: bBox.options[1].isInvalid}"/> 
        <label for="{{bBox.options[1].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[1].name | uppercase}}</div></label> 
       </div> 
      </div> 
     </div> 

모든 것이 잘 작동된다. 자바 스크립트를 통해 플래그를 false로 설정하면 HTML에 반영되지 않고 라디오 버튼이 변경되지 않습니다.

ngDisabled에 근본적으로 잘못된 점이 있습니까? 아니면 ngDisabled에 문제가 있습니까?

+0

안녕하세요, 여기 봐주십시오 http://jsbin.com/hefeb/2/edit 모든 것이 좋은 것 같습니다 ? – sylwester

+0

예. 그런 식으로 작동합니다. 이상한 ... 어쨌든 해결책을 찾았습니다. 답변으로 업데이트되었습니다. – nikjohn

답변

0

문제가 .. 추가 NG-값과 NG 모델 해결 :

<div class="buyBox" id="{{bBox.id}}" ng-repeat="bBox in bBoxProps" ng-class="{disabledBb: bBox.disabled, invalidBb: bBox.invalid}"> 
      <div class="bbTitle"><h3>{{bBox.title | uppercase}}</h3></div> 
      <div class="bbSelect"> 
       <div class="bbSelectTop bbSelectOpt"> 
        <input type="radio" name="{{bBox.id}}" id="{{bBox.options[0].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[0])" ng-checked="bBox.options[0].isSelected==true" ng-model="bBox.options[0].isSelected" ng-disabled="bBox.options[0].isDisabled" ng-class="{invalidBbOpt: bBox.options[0].isInvalid}" ng-value="true"/> 
        <label for="{{bBox.options[0].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[0].name}}</div></label> 
       </div> 
       <div class="buyOr">OR</div> 
       <div class="bbSelectBottom bbSelectOpt"> 
        <input type="radio" name="{{bBox.id}}" id="{{bBox.options[1].optId}}" class="css-checkbox" ng-click="pmFlow(state,this,bBox.options[1])" ng-checked="bBox.options[1].isSelected==true" ng-model="bBox.options[1].isSelected" ng-disabled="bBox.options[1].isDisabled" ng-class="{invalidBbOpt: bBox.options[1].isInvalid}" ng-value="true"/> 
        <label for="{{bBox.options[1].optId}}" class="bbLabel"><div class="bbLabelText">{{bBox.options[1].name}}</div></label> 
       </div> 
      </div> 
     </div>