angularjs checkbox append to scope variable

Question

I have a table as follows:

    <tr ng-repeat="user in users">
        <td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
        <td>
            <input type="checkbox">
        </td>
    </tr>

and the json is as follows:

{
    "users": 
    [
        { "fields": {"first_name": "sam", "last_name": "smith"}, "model": "auth.user", "pk": 3}, 
        { "fields": {"first_name": "tom", "last_name": "moody"}, "model": "auth.user", "pk": 4}
    ]
}

I want to have a functionality to add the pk's of the selected checkboxes to a scope variable. Since i don't have a boolean field for the selected in my json, how will i approach this?

Create a custom function which add your pk's and bind it to the ng-click to checkbox and do rest. May be this works. — pmverma
– pmverma, Commented Jun 4, 2015 at 7:32

Huy Hoang Pham · Accepted Answer · 2015-06-04 07:56:16Z

You can try the code in my fiddle, the selected PKs are stored in an array call 'selected'. The pk must be unique for each user.

var app = angular.module('app', []);
var ctrl = app.controller('MyCtrl', function($scope) {
  $scope.users = [{
    "fields": {
      "first_name": "wasif",
      "last_name": "abbas"
    },
    "model": "auth.user",
    "pk": 3
  }, {
    "fields": {
      "first_name": "asad",
      "last_name": "zaman"
    },
    "model": "auth.user",
    "pk": 4
  }, {
    "fields": {
      "first_name": "hes",
      "last_name": "man"
    },
    "model": "auth.user",
    "pk": 5
  }];

  $scope.selected = [];
  $scope.toggleSelection = function toggleSelection(pk) {
    var idx = $scope.selected.indexOf(pk);

    // is currently selected
    if (idx > -1) {
      $scope.selected.splice(idx, 1);
    }

    // is newly selected
    else {
      $scope.selected.push(pk);
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller='MyCtrl'>
    <table>
      <tr ng-repeat="user in users">
        <td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
        <td>
          <input type="checkbox" ng-checked="selected.indexOf(user.pk) > -1" ng-click="toggleSelection(user.pk)" />
        </td>
      </tr>
    </table>
    Selected: {{selected}}
  </div>
</div>

Christian · Accepted Answer · 2015-06-04 09:40:05Z

Or you can try with ng-change, which is a bit more elegant imo:

var app = angular.module('app', []);

app.controller('AController', function($scope) {
   
$scope.users = [
    { "fields": {"first_name": "wasif", "last_name": "abbas"}, "model": "auth.user", "pk": 3}, 
    { "fields": {"first_name": "asad", "last_name": "zaman"}, "model": "auth.user", "pk": 4}
];

$scope.selectedUsers = {};

$scope.addUser = function(pk, userselected) {
    if(userselected) {
        $scope.selectedUsers[pk] = true;
    } else {
        delete $scope.selectedUsers[pk];
    }
}

$scope.getSelectedUsersArray = function() {
    return Object.keys($scope.selectedUsers);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="AController">
    <table>
         <tr ng-repeat="user in users">
            <td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
            <td>
                <input type="checkbox" ng-model="userselected" ng-change="addUser(user.pk, userselected)"/>
            </td>
        </tr>
    </table>
    <div>Selected: {{getSelectedUsersArray()}}</div>
</div>
</div>

Collectives™ on Stack Overflow

angularjs checkbox append to scope variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related