angularjs watch for change within group - angularjs

Question

i have these array object
$scope.filters = {
1 : {
name : 'Pattern',
options : {
1 : { name: 'Plain', selected: false },
2 : { name: 'Self Design', selected: false },
3 : { name: 'Check', selected: false },
4 : { name: 'Stripe', selected: false },
5 : { name: 'Print', selected: false },
6 : { name: 'Others', selected: false }
}
},
2 : {
name : 'Colour',
options : {
1 : { name: 'White', selected: false },
2 : { name: 'Blue', selected: false },
3 : { name: 'Grey', selected: false },
4 : { name: 'Pink', selected: false },
5 : { name: 'Purple', selected: false },
6 : { name: 'Black', selected: false },
//7 : { name: 'Others', selected: false }
}
},
3 : {
name : 'Material',
options : {
1 : { name: 'Cotton', selected: false },
2 : { name: 'Technicals', selected: false },
3 : { name: 'CVC', selected: false },
4 : { name: 'Cotton, Two Ply', selected: false }
}
}
}
how to get a group list of selected = true filters using $watch?
if possible i want the result stucture to be like this :
{
Pattern : {
1 : Plain,
2 : Self Design
},
Colour : {
1: Blue
}
}

Answer 1

Try this:
var name ,options, selected = {};
for (var idx in $scope.filters) {
name = $scope.filters[idx]['name'];
options = $scope.filters[idx]['options'];
for (var i in options) {
if(options[i]['selected']) {
selected[name] = selected[name] || {};
selected[name][i] = options[i]['name'];
}
}
}
console.log(JSON.stringify(selected,null,4));
/*
{
"Pattern": {
"1": "Plain",
"2": "Self Design"
},
"Colour": {
"2": "Blue"
}
}
*/

Answer 2

Look at this plunkr. Not the exact solution, but will give you a start.
I have used $watch (with objectEquality parameter) to get the changed object. You can then use underscore.js or pure javascript to filter out the selected items.