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, как показано ниже:

<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>

Все работает нормально, за исключением того, что подопция «isDisabled» не привязывается к переключателю. Когда я устанавливаю флаг в false через JavaScript, это не отражается на HTML, и переключатель остается неизменным.

Я делаю что-то принципиально неправильное с реализацией или что-то не так с ngDisabled?


data-binding angularjs radio-button disabled-input
person nikjohn    schedule 23.06.2014    source источник
comment
Привет, посмотрите здесь jsbin.com/hefeb/2/edit похоже все Это хорошо ?   -  person sylwester    schedule 24.06.2014
comment
Ага.. так работает. Странно... Все равно нашел решение... Обновлено как ответ   -  person nikjohn    schedule 24.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Решил проблему.. добавил ng-value и ng-model:

<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>
person nikjohn    schedule 24.06.2014