data-binding - 如何在 AngularJS 中使用 radio 和复选框绑定(bind)到复杂对象？

Question

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

{ 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}}

我正在寻找的是一种将 radio 和复选框直接绑定(bind)到对象本身而不是 id 的方法，所以我们可以这样做

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

反而。这可以通过 ng-options 使用 select 指令来实现，但是我们如何使用 radio 和复选框来做到这一点？如果可能的话，我仍然想使用 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 绑定(bind)到实际的项目对象并使用 id 检查它们是否匹配(而不是引用)”。

Answer 1

[更新]

发现 ngValue 后，我完全改变了我的答案。指令，似乎没有记录。它允许您绑定(bind)对象，而不仅仅是字符串作为 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/