Data binding 如何使用AngularJS中的收音机和复选框绑定到复杂对象？

假设我们有一组通过项目服务公开的项目：

{ id: '123', name: 'Yeoman', watchers: '1233', ... }
{ id: '123', name: 'Grunt', watchers: '4343', ... }

然后，我们有一个表格来选择您最喜欢的项目：

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

这会将choices.favoriteProject设置为所选项目的id值。通常，我们需要访问相关对象，而不仅仅是id：

John's favorite project:
{{Project.get(data.favoriteProject).name}}

我要寻找的是一种将收音机和复选框直接绑定到对象本身的方法，而不是id，这样我们就可以做到

John's favorite project:
{{data.favoriteProject.name}}

相反。这可以通过ng选项选择指令，但我们如何使用收音机和复选框来实现？如果可能的话，我仍然希望使用ID进行匹配，而不是引用

为了澄清，这里有一个我想要的例子

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}

---

它说：“请将data.favoriteProject绑定到实际的项目对象，并使用id检查它们是否匹配（而不是引用）。

[Update]

在发现

ngValue

指令后，我完全改变了我的答案，该指令似乎没有记录在案。它允许您在单选按钮输入上绑定对象，而不仅仅是字符串作为

ngModel

的值

{{project.name}
您最喜欢的项目是{{data.favoriteProject.name}

这使用引用来检查，而不仅仅是ID，但我认为在大多数情况下，这是人们将要寻找的。如果您确实非常严格地只希望基于ID进行匹配，您可以使用下面的[旧答案]，甚至更好，只需创建一个函数——例如

projectById（projectId）

，您可以使用该函数根据项目ID查找项目

我已经更新了JSFIDLE来演示：

---

[旧答案]

也许您可以利用单选按钮指令的

ng change

属性来实现您想要的功能。考虑这个HTML:< /P>

选择您喜爱的项目：

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

{{project.name}
您最喜欢的项目是{{data.favoriteProject.name}

您还可以调用

ng change

中的函数，例如

setfavoriteProject（project）

——但为了简单起见，我在这里没有这样做

下面是一个正在使用的JSFIDLE来演示这项技术：

不需要任何更改（我不确定这样编写内联代码是否是一种好的做法。另一方面，angulars指令离它们自己也不太远）。为什么不这样做（也适用于ng repeat）：

小提琴：

代码：

测试：{oSelected}}
app=angular.module（'app'，[]）；
应用程序控制器（'controller'，函数（$scope）{
$scope.aData=[
{o:1}，
{o:2}
];
$scope.oSelected={}；
});

---

编辑：我可能应该提到，这不适用于复选框，因为值可能是真的，也可能是假的。此外，共享模型将导致同时选中或取消选中所有复选框。

谢谢！我真的很喜欢这个解决方案。它很简单，但工作起来很整洁！我暂时把这个问题留给其他的解决方案。问题是存在重复数据（id），我们必须自己管理设置值。为什么要使用项目[$index]，而不仅仅是项目对象？我在JSFIDLE中进行了重构，但忘记了更新post。谢谢这种方法的复选框有一个小问题。ng change会在选中和取消选中时触发，因此即使我们取消选中，也会设置favoriteProject。有趣的是，ng模型在这里或多或少是一个废弃的模型。请参见

ng value

解决方案，它非常灵活