我觉得我只是错过了什么,但我看不清是什么。我似乎无法使单选按钮的值与复选框的行为方式相同。我做错了什么?
下面是一个演示: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>
这是我的控制器
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[收音机]这个解释没有考虑到真正的"动态"环境。正如您所看到的,在示例中,颜色是以前缀为前缀的。我假设,您希望您的表是完全动态的,没有任何前缀。
我做的第一件事是对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"进行比较。在比较单选按钮时,我不能使用真正的布尔值。
此外,现在还有一个value="true"
,它是比较所必需的(它检查行,其中isPrimary实际上是true
(。最后是ng-change
部分的一个新方法。我们需要这个,因为当一个值变为true时,我们需要告诉控制器其他值都是false。这就是为什么我们还将ng-repeat
迭代的$index
赋予该方法,因为当前更改为true
的值不需要再次为false
。
这是新的控制器:
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';
}
}
};
}
控制器包括isPrimary
使用Strings而不是Boolean的更改以及新的update()
方法。以下是jsfiddle中一个工作演示的链接:http://jsfiddle.net/vwJ6a/20/
更新:
Chris和我显然找到了一种方法,在ng repeat中为单选按钮使用真正的布尔值。为了使用它,必须使用ng-value="true"
而不是value="true"
。value
似乎不起作用,我在这里得到了这个想法:AngularJS-将单选按钮绑定到具有布尔值的模型
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>
控制器是这样的:
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/
主要区别在于复选框允许多次选择,而单选按钮不允许。这就是为什么单选按钮应该共享相同的型号。在您的情况下,ngModel
指向不同的对象。
这就是我绕过它的方法:
<td ng-class="{'success':primaryContact.email == contact.email}">
<input type="radio" name="radio-primary" ng-model="primaryContact.email"
ng-value="contact.email"/>
</td>
JS
$scope.primaryContact = {
email:"jaDoe@domain.com"
};
更新的Fiddle
我相信,如果您在无线电输入行中添加value="1",您就会得到您想要的结果。
<input type="radio" value="1" name="radio-primary" ng-model="contact.isPrimary" />