Angularjs: checkbox and ng-change

Question

I have problems to understand how ng-change works. I have a list of user to invite to join an auction. I want to do this with a checkbox. If the user is checked, his name has to be saved into an array. And later i will invite them(i just know how to do this). But i don't understand how to use the checkbox. I did something like this:

<ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
        <img ng-src="{{user.img}}" class="image2" >
        <div class="username"> {{user.name}}</div>
        <div class="userrole"> {{user.role}} </div>
        <div class="usercompany">{{user.company}}</div>
        <input type="checkbox"  ng-model="isChecked" ng-change="insertinvited(user.name)">
    </li>
</ul>

And in my controller:

$scope.invited = [];
$scope.insertinvited= function (name) {
    if($scope.isChecked){
        $scope.invited.push(name)
    } else {
        console.log($scope.invited);
    }
};

But this is not working, in the console the array is always empty.

Earache

Answer 1

The problem in your code is that your checkbox model (isChecked) is used by all the users you ngRepeated on:

<ul class="list-group" ng-repeat="user in users">
    ...
    <input type="checkbox" ng-model="isChecked" ng-change="insertinvited(user.name)">
</ul>

I suggest you to have a checkbox model for each user:

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

Note that in your ng-change, I pass the whole user object, and not only user.name (because I will also need the user.isChecked property).

---

Here is the "new" insertinvited() function:

$scope.insertinvited = function(user) {
    if(user.isChecked) {
        $scope.invited.push(user.name);
    } else {
        var toDel = $scope.invited.indexOf(user.name);
        $scope.invited.splice(toDel, 1);
    }
}

Bristow

ok, this works! But what if i've to remove name from array if i click again? In this code if i click on the checkbox, the username is saved. But if i deselect the checkbox the name still remain into the array. what i have to use if i want remove the name when i deselect the checkbox? – Earache

@MarcoPagano I've updated my answer to add an else for deleting. Please accept the answer if it solved your issue – Bristow

Wait, i don't know which of answers i prefer :D. However the else doesn't work. When i have selected only one user, it works. But when i have selected more than one, it splice the last that i added, not the right one – Earache

use $scope.invited.splice(toDel, 1); then it will work – Assimilate

Answer 2

What you need here is isChecked for all the items in ng-repeat and not just as single variable. So, I changed your checkbox like:

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

Here's working example:

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.users = [{
      name: "test1",
      role: "manager",
      company: "google",
      img: ""
    }];

    $scope.invited = [];
    $scope.insertinvited = function(user) {
      if (user.isChecked) {
        $scope.invited.push(user.name)
      } 
      console.log($scope.invited);

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
      <img ng-src="{{user.img}}" class="image2">
      <div class="username"> {{user.name}}</div>
      <div class="userrole"> {{user.role}} </div>
      <div class="usercompany">{{user.company}}</div>
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
    </li>
  </ul>
</div>

EDIT: However, doing it this way, you would need to handle removal also. I'd suggest you go with following approach instead.

Explanation: On change of any checkbox value, you filter all the users with isChecked set to true.

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.users = [{
      name: "test1",
      role: "manager",
      company: "google",
      img: ""
    }];

    $scope.invited = [];
    $scope.insertinvited = function() {
      $scope.invited = $scope.users.filter(obj => obj.isChecked)
      $scope.invited = $scope.invited.map(obj => obj.name)
      console.log($scope.invited);

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
      <img ng-src="{{user.img}}" class="image2">
      <div class="username"> {{user.name}}</div>
      <div class="userrole"> {{user.role}} </div>
      <div class="usercompany">{{user.company}}</div>
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
    </li>
  </ul>
</div>

Madalena

ok, this works! But what if i've to remove name from array if i click again? In this code if i click on the checkbox, the username is saved. But if i deselect the checkbox the name still remain into the array. what i have to use if i want remove the name when i deselect the checkbox? – Earache

Answer 3

Use it

<input type="checkbox" id="{{'j' + $index}}" name="{{'j' + $index}}" ng-model="tasks.Checked" ng-change="checkinTask(tasks)"

This Part from controller.

$scope.checkinTask = function (task) {

                        if (task.Checked === true) {
                            task.Lineclass = "checkedTask";
                            $scope.disabled = false;
                            trash.removeClass("disabled");
                        } else {
                            task.Lineclass = "";
                        }
                        var checkedExist = false;
                        tasks.forEach(function (v) {
                            if (v.Checked) {
                                checkedExist = true;
                            }
                        });
                        if (!checkedExist) {
                            $scope.disabled = true;
                            trash.addClass("disabled");
                        }
                    };

Arletha