ngDisabled 不适用于无线电组绑定无嵌套模型 - AngularJS答案

【问题标题】：ngDisabled not working for radio group bound no nested model - AngularJSngDisabled 不适用于无线电组绑定无嵌套模型 - AngularJS
【发布时间】：2014-08-13 23:03:07
【问题描述】：

我正在尝试使用一个模型来实现两种方式的数据绑定，该模型是这种格式的对象数组：

 $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”子选项没有绑定到单选按钮。当我通过 JavaScript 将标志设置为 false 时，它不会反映在 HTML 上，并且单选按钮保持不变。

我是在实现上做错了什么，还是 ngDisabled 出了什么问题？

【问题讨论】：

嗨，请看这里jsbin.com/hefeb/2/edit 看起来一切都很好？
是的..它就是这样工作的。奇怪...找到了解决方案..更新为答案

标签： angularjs data-binding radio-button disabled-input

【解决方案1】：

解决了这个问题。添加了 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>

【讨论】：