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 加载查看/编辑表单页面时，它会正确显示所有联系人的无线电状态。问题来了，在页面加载后，当用户选择另一个联系人作为默认值时。这实际上将新选择的联系人的默认模型值更改为真，但是原始默认联系人的模型值仍然保持为真，即使其无线电状态更改为取消选中/模糊（因为它们具有相同的“名称”值）。

我想写一个指令，但我无法在无线电模糊/取消选中事件上触发它。

有很多关于将布尔值绑定到单选按钮的帖子，但我无法在我的场景中使用它，因为我想更新单选按钮组中单个单选按钮的模型值。看看没有代表无线电组的单一模型。

Answer 1

我认为您应该更改设计以将contacts 与contactTypes 分开并将键 存储到联系人类型中的默认联系人。

在您当前的设计中，default 存在重复值，这不是使用 radio 的理想方式。

$scope.contacts = [
        { type: "IM", value: "mavaze123" },
        { type: "IM", value: "mvaze2014" },
        { type: "IM", value: "mavaze923" },
        { type: "IM", value: "mvaze8927" },
        { type: "Email", value: "mavaze123@abc.com" },
        { type: "Email", value: "mvaze2014@xyz.net" } 
   ];

    $scope.contactTypes = {
        "IM": { default:"mavaze123"}, //the default is contact with value = mavaze123
        "Email": { default:"mavaze123@abc.com"}
   };

你的HTML：

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

DEMO

我假设联系人的密钥是value，您可以使用Id 作为您的联系人。

Answer 2

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

<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;
                  }
               });
           }
       }
    };
}

Answer 3

为什么你声明 ng-value="true" 请删除它

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

请在您的值更改代码中使用$scope.$apply()

喜欢下面的东西

$scope.$apply(function ChangeType()
{
/Code
});

并且您需要将name="{{contact.type}}" 更改为name="contact.type{{$index}}" 因为有些类型是同名的。