Question

7

AngularJS: single select between multiple checkbox

rated 0 times [ 13] [ 6] / answers: 1 / hits: 44749 / 10 Years ago, thu, april 24, 2014, 12:00:00

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>

    <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.

Is there an elegant solution for this problem?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jerome

Add To Favorites

Follow

Total Points: 592

Total Questions: 98

Total Answers: 101

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

jerome questions

1 Test functions cannot both take a 'done' callback

Thu, Jan 27, 22, 00:00, 2 Years ago

1 Next.js redirect from an API route

Fri, Oct 22, 21, 00:00, 3 Years ago

1 How to properly use FontAwesome in a Vue project in 2020?

Sat, Sep 19, 20, 00:00, 4 Years ago

1 How can I get a Minecraft player's UUID from their username in NodeJS?

Fri, May 29, 20, 00:00, 4 Years ago

1 How to skip some characters from formatting in date-fns

Fri, Sep 6, 19, 00:00, 5 Years ago

View All

answered 10 Years ago latrelllloydb · Accepted Answer

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>

  <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:

$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