angularjs checkbox append to scope variable - json

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?

Answer 1

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>

Answer 2

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>