AngularJs: uncheck checkbox after item is removed

Question

after spending a lot of time on this simple issue and having made a lot of research, I was wondering if someone could give me some help.

I have data which is generated inside of a table like so:

<tbody>
     <tr class="odd gradeX" ng-repeat="user in ctrl.datas | orderBy:ctrl.sortType:ctrl.sortTypeReverse">
     <td>
        <input type="checkbox" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>
     </td>
     <td>
       {{user.given_name}}
     </td>

     <td>
         {{user.family_name}}
     </td>
     <td>
       <a href="mailto:{{user.emai}}"> {{user.email}}</a>
     </td>
     <td class="center" ng-bind-html="ctrl.convertToDate(user.created_at) | date: 'dd-MMMM-yyyy hh:mm'"></td>
     <td>
       <span class="btn blue-hoki"> Details </span>
     </td>
    </tr>
</tbody>

Above is a container where I get the items selected via a checkbox, add the in an array and give the user the ability to delete the selected item:

<tr ng-repeat="user in ctrl.checkedObject track by $index" ng-show="user.id">
   <td>{{user.family_name}}</td>
   <td>{{user.given_name}}</td>
   <td>
      <button class="btn blue" ng-click="ctrl.removeItem($index)">Unselect</button>
    </td>
</tr>

In my controller, here are the two functions used to do so:

this.checkedObject = [];

//Add selected user

this.addItem = function (user) {
   self.checkedObject.push(user);
};
this.removeItem = function(obj){
   delete self.checkedObject[obj];
};

What i'd like to achieve is to uncheck the corresponding checkbox if a user changes his selection. The thing is, I have no idea how to target the corresponding checkbox. Does anyone have a clue? Thanks in advance

Eigi · Accepted Answer · 2016-02-22 19:37:08Z

2

Try ng-checked like:

 <input type="checkbox" ng-checked="user !== null" class="checkboxes" value="{{user.id}}" ng-click="ctrl.addItem(user)"/>

And set the item (user) to null on button click (inside removeItem() ) or a other variable.

answered Feb 22, 2016 at 19:37

Eigi

7168 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

t3__rry Over a year ago

Thanks very much for you answer, unfortunately what it does in my app is checking all the checkboxes...

Eigi Over a year ago

Don't understand what you mean, but if the expression inside ng-checked is true, the checkbox is checked, otherwise unchecked. So if you remove the item (which is the user), you can set the user to null and the expression of ng-checked will be automatically false -> the checkbox is unchecked. If it was the right answer, just upvote and mark as solution.

t3__rry Over a year ago

I understand the logic yet it doesn't actually work as expected (I haven't posted all my code), thanks for your help anyway

Bennett Adams · Accepted Answer · 2016-02-22 19:51:01Z

1

I set up a simple plunker to show one approach, which would be to assign a selected property to each user when his/her checkbox is checked, and set an ng-checked attribute on the checkbox corresponding to user.selected (so will be unchecked when false).

Using this approach you won't need to push and delete from the array of checkedUsers, you can just filter all the users by whether they are selected or not.

function getSelected() {
  ctrl.checkedObject = _.filter(ctrl.datas, {selected: true});
}

ctrl.selectUser = function (user) {
   user.selected = true;
   getSelected();
};
ctrl.removeUser = function(user){
   user.selected = false;
   getSelected();
};

answered Feb 22, 2016 at 19:51

Bennett Adams

1,81815 silver badges17 bronze badges

5 Comments

t3__rry Over a year ago

Hi, thanks very much. It would work in the provided context yet the data I'm retrieving are presently in a JSON file and will be fetch remotely via an API. Do you think it 'd be worth altering the datas to add the select key?

Bennett Adams Over a year ago

You don't have to update anything on your API side, it can just be a client-side property dynamically added in the controller.

t3__rry Over a year ago

Ok I've achieved to do so and added it to my objects, thanks a lot, I'll work around and will let you know

t3__rry Over a year ago

Hey Bennett, it works great thanks again for your very appreciated help ;)

Vetrivel Pandiyarajan Over a year ago

Can any one tell me that how can i set one checkbox has been checked at initial from default

Collectives™ on Stack Overflow

AngularJs: uncheck checkbox after item is removed

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related