我觉得我只是在这里遗漏了一些东西，但我看不到什么。我似乎无法让单选按钮的值以与复选框相同的方式运行。我做错了什么？
这是一个演示:http://jsfiddle.net/vwJ6a/2/
这是我的 HTML 的样子
<tr ng-repeat="contact in ContactsList">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td ng-class="{'success':contact.isPrimary}">
<input type="radio" name="radio-primary" ng-model="contact.isPrimary" />
</td>
<td ng-class="{'success':contact.isTechnical}">
<input type="checkbox" ng-model="contact.isTechnical" />
</td>
</tr>
这是我的 Controller
function MyCtrl($scope) {
$scope.ContactsList = [{
name: "John Doe",
email: "joDoe@domain.com",
isPrimary: false,
isTechnical: true
}, {
name: "Jane Doe",
email: "jaDoe@domain.com",
isPrimary: true,
isTechnical: false
}, {
name: "Bill Murray",
email: "bMurray@domain.com",
isPrimary: false,
isTechnical: false
}, {
name: "Someone Dude",
email: "someone@domain.com",
isPrimary: false,
isTechnical: false
}];
}
最佳答案
好问题!我被困在一个类似的问题上并实现了一种解决方法。首先，我认为您不希望单选按钮以与复选框相同的方式运行。复选框允许多个值，而单选框不允许。大概说的很清楚，我只是想说明一下，以免造成误解。
AngularJS 文档对单选按钮的用法做了一些解释。 https://docs.angularjs.org/api/ng/input/input[radio]该解释没有考虑真正的“动态”环境。如您所见，颜色在示例中带有前缀。我假设，您希望您的表是完全动态的，没有任何前缀。
我做的第一件事是对 HTML 进行以下更改:
<form name="myForm" ng-controller="MyCtrl">
<h4>Primary: {{GetPrimaryContact().email}}</h4>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Primary</th>
<th>Technical</th>
<th>Sales</th>
<th>Billing</th>
<th>Emergency</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in ContactsList">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td ng-class="{'success':contact.isPrimary == 'true'}">
<input type="radio" name="radio-primary" ng-model="contact.isPrimary" value="true" ng-change="update($index)" />
</td>
<td ng-class="{'success':contact.isTechnical}">
<input type="checkbox" ng-model="contact.isTechnical" />
</td>
<td ng-class="{'success':contact.isSales}">
<input type="checkbox" ng-model="contact.isSales" />
</td>
<td ng-class="{'success':contact.isBilling}">
<input type="checkbox" ng-model="contact.isBilling" />
</td>
<td ng-class="{'success':contact.isEmergency}">
<input type="checkbox" ng-model="contact.isEmergency" />
</td>
</tr>
</tbody>
</table>
</form>
success 类检查将 isPrimary 与字符串“true”进行比较。在单选按钮上进行比较时，我无法使用真正的 bool 值。
此外，现在有一个 value="true" 是比较所必需的(它检查行，其中 isPrimary 实际上是 true)。最后一件事是 ng-change 部分中的一个新方法。我们需要这个，因为当一个值变为真时，我们需要告诉 Controller 其他值是假的。这就是为什么我们还将 ng-repeat 迭代的 $index 赋给该方法，因为当前更改为 true 的值不会不需要再次为 false。
这是新的 Controller :
function MyCtrl($scope) {
$scope.ContactsList = [{
name: "John Doe",
email: "joDoe@domain.com",
isPrimary: 'false',
isTechnical: true,
isSales: false,
isBilling: true,
isEmergency: true
}, {
name: "Jane Doe",
email: "jaDoe@domain.com",
isPrimary: 'true',
isTechnical: false,
isSales: false,
isBilling: true,
isEmergency: true
}, {
name: "Bill Murray",
email: "bMurray@domain.com",
isPrimary: 'false',
isTechnical: false,
isSales: true,
isBilling: false,
isEmergency: false
}, {
name: "Someone Dude",
email: "someone@domain.com",
isPrimary: 'false',
isTechnical: false,
isSales: false,
isBilling: false,
isEmergency: true
}];
$scope.GetPrimaryContact = function () {
return _.findWhere($scope.ContactsList, {
isPrimary: 'true'
});
};
$scope.update = function(index) {
for (var i=0;i<$scope.ContactsList.length;i++) {
if (index != i) {
$scope.ContactsList[i].isPrimary = 'false';
}
}
};
}
Controller 包含更改，即 isPrimary 使用字符串而不是 bool 值和新的 update() 方法。这是 jsfiddle 中的工作演示的链接:http://jsfiddle.net/vwJ6a/20/
更新:
克里斯和我显然找到了一种方法，在 ng-repeat 中为单选按钮使用真正的 bool 值。
为了使用它，必须使用 ng-value="true" 而不是 value="true"。 value 似乎不起作用，我在这里得到了这个想法:AngularJS - Binding radio buttons to models with boolean values
HTML 部分将如下所示:
<form name="myForm" ng-controller="MyCtrl">
<h4>Primary: {{GetPrimaryContact().email}}</h4>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Primary</th>
<th>Technical</th>
<th>Sales</th>
<th>Billing</th>
<th>Emergency</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in ContactsList">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td ng-class="{'success':contact.isPrimary}">
<input type="radio" name="radio-primary" ng-value="true" ng-model="contact.isPrimary" ng-checked="contact.isPrimary" ng-change="UpdatePrimary(contact)" />
</td>
<td ng-class="{'success':contact.isTechnical}">
<input type="checkbox" ng-model="contact.isTechnical" />
</td>
<td ng-class="{'success':contact.isSales}">
<input type="checkbox" ng-model="contact.isSales" />
</td>
<td ng-class="{'success':contact.isBilling}">
<input type="checkbox" ng-model="contact.isBilling" />
</td>
<td ng-class="{'success':contact.isEmergency}">
<input type="checkbox" ng-model="contact.isEmergency" />
</td>
</tr>
</tbody>
</table>
</form>
Controller 是这样的:
function MyCtrl($scope) {
$scope.ContactsList = [{
name: "John Doe",
email: "joDoe@domain.com",
isPrimary: false,
isTechnical: true,
isSales: false,
isBilling: true,
isEmergency: true
}, {
name: "Jane Doe",
email: "jaDoe@domain.com",
isPrimary: true,
isTechnical: false,
isSales: false,
isBilling: true,
isEmergency: true
}, {
name: "Bill Murray",
email: "bMurray@domain.com",
isPrimary: false,
isTechnical: false,
isSales: true,
isBilling: false,
isEmergency: false
}, {
name: "Someone Dude",
email: "someone@domain.com",
isPrimary: false,
isTechnical: false,
isSales: false,
isBilling: false,
isEmergency: true
}];
$scope.GetPrimaryContact = function () {
return _.findWhere($scope.ContactsList, {
isPrimary: true
});
};
$scope.UpdatePrimary = function(contact) {
_.each($scope.ContactsList, function(x) {
x.isPrimary = (x.email === contact.email);
});
};
}
这是 jsfiddle 中的演示:http://jsfiddle.net/vwJ6a/24/
关于javascript - ng-repeat 中的 Angular 单选按钮模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24307252/