AngularJS:将布尔值绑定到单选按钮,以便在取消选中事件时将模型更新为false

Question

在我的AngularJS应用程序中,我在网格中显示联系人数据.我的典型联系人JSON如下所示......

[
    { type: "IM", value: "mavaze123", default: true },
    { type: "IM", value: "mvaze2014", default: false },
    { type: "IM", value: "mavaze923", default: false },
    { type: "IM", value: "mvaze8927", default: false },
    { type: "Email", value: "mavaze123@abc.com", default: true },
    { type: "Email", value: "mvaze2014@xyz.net", default: false } 
]

最后一个属性'default'实际上是一个单选按钮,其选择应该改变上面JSON中相应联系人类型的原始默认值.每种类型的联系人都可以有一个默认值,即我们可以根据联系人类型对单选按钮进行分组.

<div ng-repeat="contact in contacts">
    <div>{{contact.type}}</div>
    <div>{{contact.value}}</div>
    <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true"/></div>
</div>

注意:上面的代码不是精确的代码,但大致相同,因为它将出现在自定义网格组件中.

现在,当我加载带有上述JSON的视图/编辑表单页面时,它正确显示所有联系人的无线电状态.在页面加载后,当用户选择另一个联系人作为默认值时,问题就出现了.这实际上将新选择的联系人的默认模型值更改为true,但原始默认联系人的模型值仍然为true,即使其无线状态更改为取消选中/模糊(因为它们具有相同的'name'值).

我想写一个指令,但我无法通过无线电on-blur/uncheck事件触发它.

将布尔值绑定到单选按钮上有各种帖子,但我无法在我的场景中使用它,因为我想更新单元格中单个单选按钮的模型值.看,没有一个模型代表一个无线电组.

Answer 1

我在输入语句中添加了属性指令...

<div ng-repeat="contact in contacts">
    <div>{{contact.type}}</div>
    <div>{{contact.value}}</div>
    <div><input type="radio" name="{{contact.type}}" ng-model="contact.default" ng-value="true" boolean-grid-model /></div>
</div>

还有我的自定义指令...

myModule.directive('booleanGridModel') {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
           var radioSelected = scope.$eval(attrs.ngModel);
           if(radioSelected) {
               var selectedContact = scope.contact;
               _.each(scope.contacts, function(contact) {
                  if(contact.type === selectedContact.type) {
                      _.isEqual(contact, selectedContact) ? contact.default = true : contact.default = false;
                  }
               });
           }
       }
    };
}