Some time back I was looking for multi select checkbox group option in angularjs. I could not able to find my self on stackoverflow, Since i have developed it and sharing here js fiddle link.
<div ng-app="check">
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, item) in basket"> {{item.type}}
<ul>
<li ng-repeat="(sub_catkey, sub_catval) in item.fields">
<label>
<input type="checkbox" ng-model="sub_catval.checked" /> {{sub_catval.name}} -- {{sub_catval.checked}} | json
</label>
</li>
</ul>
</li>
</ul>
Selected show here
<li ng-repeat="(key, item) in basket"> {{item.type}}
<ul>
<li ng-repeat="(sub_catkey, sub_catval) in item.fields | filter: true">
<label>
{{sub_catval.name}} -- {{sub_catval.checked}}
</label>
</li>
</ul>
</li>
{Manager: {Name: filter.key}}
{{basket}}
angular.module('check', []) .controller('controller', function($scope) {
$scope.basket = [
{
"type": "fruits",
"fields": [
{name: 'Apple', checked:false},
{name: 'Mango', checked:true},
{name: 'Banana', checked:false},
{name: 'Guava', checked:false},
{name: 'Orange', checked:false}
]
},
{
"type": "flowers",
"fields": [
{name: 'rose', checked:true},
{name: 'lilly', checked:false},
{name: 'tulip', checked:false},
{name: 'marigold', checked:false},
{name: 'sunflower', checked:false}
]
}
];
$scope.selected = {
fruits: ["Apple"],
flowers: []
};
$scope.checkAll = function() {
$scope.basket = angular.copy($scope.basket);
};
$scope.uncheckAll = function() {
$scope.selected.fruits = [];
};
});