Brian Brian - 1 year ago 418
AngularJS Question

AngularJS: single select between multiple checkbox

I am trying to force a single-selection on checkboxes, similar to a html "select"

I have a html simple table:

<tr ng-repeat="subscription in entities">
<input type="checkbox" ng-checked="isChecked(subscription)" ng-click="toggleSelection(subscription)"/>

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.

Is there an elegant solution for this problem?

Answer Source

Bind ng-model to subscription.checked, and have ng-click uncheck all subscriptions except the one clicked. Since these are checkboxes, the one clicked will toggle itself.

<tr ng-repeat="subscription in entities">
    <input ng-model="subscription.checked" ng-click="updateSelection($index, entities)" type="checkbox" />

You can use a plain for loop, but angular's forEach allows us to alias each item as subscription and improve readability:

$scope.updateSelection = function(position, entities) {
  angular.forEach(entities, function(subscription, index) {
    if (position != index) 
      subscription.checked = false;

Here is a working demo:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download