如何使用AngularJS中的无线电和复选框绑定到复杂对象？

Question

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

{ 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-options使用select指令,但是我们如何使用无线电和复选框来实现这一点？如果可能的话,我仍然想使用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来检查它们是否匹配(而不是引用)".

Answer 1

[更新]

在发现该ngValue指令后,我完全改变了我的答案,该指令似乎没有记录.它允许您将对象而不仅仅是字符串绑定为ngModel单选按钮输入上的值.

<label ng-repeat="project in projects">
  <input type="radio" ng-model="data.favoriteProject"
    ng-value="project">{{project.name}}</input>
</label>

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

这使用引用来检查而不仅仅是ID,但我认为在大多数情况下,这是人们将要寻找的.如果你不很严格只想匹配基于ID,您可以使用[老答案】,以下,甚至更好,只需创建一个功能-例如projectById(projectId),你可以使用用于查找基于其ID的项目.

我已经更新了JSFiddle来演示:http://jsfiddle.net/BinaryMuse/pj2GR/

[旧答案]

也许你可以利用ng-change单选按钮指令的属性来实现你想要的.考虑这个HTML:

<p>Select your favorite project:</p>
<label ng-repeat="project in projects">
  <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}"
         ng-change="data.favoriteProject = project">
    {{project.name}}
  </input>
</label>

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

你也可以在里面调用一个函数ng-change,例如setfavoriteProject(project)- 但为了简单起见,我没有在这里做.

这是一个工作的jsFiddle演示技术:http://jsfiddle.net/BinaryMuse/pj2GR/7/