How to add checkbox values to an array in AngularJS?
13,286
Solution 1
this is a possible solution:
<input type="checkbox" ng-model="ids[$index]" ng-true-value="
{{value}}" ng-false-value="{{undefined}}"/>{{value}}
In this way, you will have an array of objects, because you are assigning ids[$index] = value
.
There is a cons however: when you double check a checkbox, you will have an empty element in the array.
var app = angular.module('myapp', []);
app.controller('ctrlParent', function($scope) {
$scope.providers = [{
Id: 5
}, {
Id: 6
}, {
Id: 8
}, {
Id: 10
}];
$scope.ids = [];
$scope.$watchCollection('ids', function(newVal) {
for (var i = 0; i < newVal.length; ++i) {
console.log(newVal[i]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<table>
<tr ng-repeat="(key,value) in providers">
<td>
<input type="checkbox" ng-model="ids[$index]" ng-true-value="{{value}}" ng-false-value="{{undefined}}" />{{value}}
</td>
</tr>
</table>{{ids}}</div>
</div>
http://jsfiddle.net/b9jj0re2/3/
Solution 2
<input type="checkbox" ng-model="ids[$index]" ng-true-value="{{value}}" >
Addign the ng-true-value directive will solve the problem and in controller change the ids from object to array
Author by
Djonkwt
Updated on July 19, 2022Comments
-
Djonkwt almost 2 years
Someone help me please! Lets say I have an a list of a checkboxes, each checkbox have an ID. I would like to $scope an array with checked checkboxes IDs.
<div ng-app="myapp"> <div ng-controller="ctrlParent"> <table> <tr ng-repeat="(key, value) in providers"> <td><input type="checkbox" ng-model="ids[value.Id]"> {{value}} </td> </tr> </table> {{ids}} </div>
And my controller:
var app = angular.module('myapp',[]); app.controller('ctrlParent',function($scope){ $scope.providers = [{Id:5},{Id:6},{Id:8},{Id:10}]; $scope.ids = {}; });
Now my array output (if all check boxes are checked) is: {"5":true,"6":true,"8":true,"10":true}
And I would like: [{Id:5},{Id:6},{Id:8},{Id:10}]