在我的 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>
Note: The above code is not the exact one, but approximately same, as it will appear inside a custom grid component.
现在,当我使用上述 JSON 加载查看/编辑表单页面时,它会正确显示所有联系人的 radio 状态。问题来了,在页面加载后,当用户选择另一个联系人作为默认值时。这实际上将新选择的联系人的默认模型值更改为真,但原始默认联系人的模型值仍然保持为真,即使其 radio 状态更改为取消选中/模糊(因为它们具有相同的“名称”值)。
我想写一个指令,但我无法在 radio 模糊/取消选中事件上触发它。
有很多关于将 bool 值绑定(bind)到单选按钮的帖子,但我无法在我的场景中使用它,因为我想更新单选按钮组中单个单选按钮的模型值。请参阅没有代表 radio 组的单一模型。
最佳答案
我认为你应该改变你的设计来分离 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
为您的联系。
关于AngularJS:将 bool 值绑定(bind)到单选按钮,以便在取消选中事件时将模型更新为 false,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20917384/