在我的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 }
]

最后一个属性“默认”实际上是一个单选按钮,对其进行选择应更改上面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加载我的 View /编辑表单页面时,它可以正确显示所有联系人的 radio 状态。问题是在页面加载后,当用户选择另一个联系人作为默认联系人时出现的。这实际上将新选择的联系人的默认模型值更改为true,但是原始默认联系人的模型值仍保持为true,即使其 radio 状态更改为取消选中/模糊(因为它们具有相同的“名称”值)也是如此。

我本想写一条指令,但无法在 radio 模糊/取消选中事件中触发它。

关于将 bool 值绑定(bind)到单选按钮有很多文章,但是我无法在我的场景中使用它,因为我想更新单选组中单个单选按钮的模型值。看到没有一个代表 radio 组的模型。

最佳答案

我认为您应该更改设计,以将contactscontactTypes分开,并将存储为联系人类型中的默认联系人。

在您当前的设计中,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

09-30 16:28
查看更多