[英]AngularJS: single select between multiple checkbox
I am trying to force a single-selection on checkboxes, similar to a html "select" 我试图在复选框上强制单选,类似于html“select”
I have a html simple table: 我有一个简单的html表:
<tr ng-repeat="subscription in entities">
<td>
<input type="checkbox" ng-checked="isChecked(subscription)" ng-click="toggleSelection(subscription)"/>
</td>
</tr>
Then I have some simple controller functions for those directives above: 然后我有一些简单的控制器函数用于上面的指令:
$scope.isChecked = function(entity) {
return $scope.checkedEntity === entity;
};
$scope.toggleSelection = function(entity) {
entity.checked = !entity.checked;
if (entity.checked) {
$scope.checkedEntity = entity;
} else {
$scope.checkedEntity = null;
}
};
Unfortunately it doesn't work, and I think I just discovered why.... the ng-click has 0 priority, vs 100 for ng-checked. 不幸的是它不起作用,我想我刚刚发现了...... ng-click有0优先级,而ng-checked有100。
Is there an elegant solution for this problem? 这个问题有优雅的解决方案吗?
Bind ng-model
to subscription.checked
, and have ng-click
uncheck all subscriptions except the one clicked. 将
ng-model
绑定到subscription.checked
,并使用ng-click
取消选中除单击之外的所有订阅。 Since these are checkboxes, the one clicked will toggle itself. 由于这些是复选框,因此单击的按钮将自动切换。
<tr ng-repeat="subscription in entities">
<td>
<input ng-model="subscription.checked" ng-click="updateSelection($index, entities)" type="checkbox" />
</td>
</tr>
You can use a plain for
loop, but angular's forEach
allows us to alias each item as subscription
and improve readability: 您可以使用plain
for
循环,但angular的forEach
允许我们将每个项目别名为subscription
并提高可读性:
$scope.updateSelection = function(position, entities) {
angular.forEach(entities, function(subscription, index) {
if (position != index)
subscription.checked = false;
});
}
Here is a working demo: http://plnkr.co/edit/XD7r6PoTWpI4cBjdIZtv?p=preview 这是一个工作演示: http : //plnkr.co/edit/XD7r6PoTWpI4cBjdIZtv?p = preview
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> angular.module('app', []).controller('appc', ['$scope', function($scope) { $scope.selected = 'other'; } ]); </script> </head> <body ng-app="app" ng-controller="appc"> <label>SELECTED: {{selected}}</label> <div> <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male <br> <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female <br> <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other </div> </body> </html>
I have used the below code to achieve the similar functionality. 我使用下面的代码来实现类似的功能。 Trick is to use ng-click which can yield this pretty nicely.
诀窍是使用ng-click ,这可以很好地产生这种效果。 checkbox-1 & checkbox-2 are boolean in nature.
checkbox-1和checkbox-2本质上是布尔值。
<form>
<input type="checkbox" ng-click="checkbox-2 = false" ng-model="checkbox-1" >
<input type="checkbox" ng-click="checkbox-1 = false" ng-model="checkbox-2" >
</form>
Off the top of my head, I'd suggest one of three options for you. 在我的头顶,我建议你选择三个选项之一。
I'd go with option 3--I'm always a fan of taking advantage of native input elements. 我选择3 - 我总是喜欢利用原生输入元素。
<tr ng-repeat="subscription in entities">
<td><input type="radio"
ng-model="selection"
name="subscriptionRadio"
value="{{subscription}}"/>
</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.