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/

Answer 2

不需要更改ng（我不确定，如果编写这样的内联代码是一个好习惯。另一方面，angulars指令与它们自己并不太远）。为什么不做这样的事情（也适用于ng-repeat）：

小提琴： http://jsfiddle.net/JohannesJo/VeZxh/3/

代码：

<body ng-app="app">
<div ng-controller='controller'>
<input type = "radio" ng-model = "oSelected"  value = "{{aData[0]}}">
<input type = "radio" ng-model = "oSelected"  value = "{{aData[1]}}">
<div>test:     {{oSelected}}</div>
</div>
</body>


app = angular.module('app',[]);

app.controller('controller', function($scope){
$scope.aData = [
    {o:1},
    {o:2}
];
$scope.oSelected = {};
});

编辑：我可能应该提到这对复选框不起作用，因为值将为true或false。此外，共享模型将导致所有复选框同时被选中或取消选中。

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

2 个答案: