We Keep Coding

Mapping objects in ng-value and ng-model (Angularjs)

An old code to display the radio boxes on angular side was written like this before:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
value="{{item}}"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The problem was item is an object and the function saveRadio used to save the object in text format. We tried substituting the value with ng-value as below. Now preselection of saved answer is not happening. Code is shown below:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The scope variable data has the array of answers map.
Am I missing something here or is there something more to be added for Object comparison?

Figured this out, apparently ng-model and ng-value can store objects but doesn't do object comparison. Adding a ng-checked with the unique value will preselect the radiobox like so:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-checked="item.option == data[item].option)"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>

You can achieve the goal with this approach also:
$scope.items = [{id:1,name:"first"}];
$scope.savedAnswer = {id:1,name:"first"};
var index = $scope.items.map(function(obj, index) {
if(obj.name == $scope.savedAnswer.name) {
return index;
}
}).filter(isFinite);
$scope.preselectedAnswer = $scope.items[index];
View
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="preselectedAnswer">
{{item.name}}
</label>
plunker : http://plnkr.co/edit/83atxi7JGtyBSlRqK2xo?p=preview

nested ng-repeat on two separate arrays

More than finding a way to resolve this, I am now interested in understanding why this is not working.
Let's say I have this array in angular:
$scope.movieThemes = [ 'Fiction', 'Drama'];
And another array with with movies like:
$scope.movies=[{theme:'Drama', movie:'One million dollar baby'}, {theme:'Drama', movie:'Green mille'},{theme:'Fiction', movie:'Avatar'}, {theme:'Fiction', movie:'The Hobbit'}]
I have an ngRepeat with my themes
<div ng-repeat= "t in movieThemes">
And a nested datalist filtering the themes:
ng-repeat="m in movies|filter:{theme:t}
Where t is from the parent repeater like:
<datalist id="movieList">
<option ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option>
</datalist>
OK as you can confirm on my fiddle this is not working:
Online Demo
But the question is why not?
Worth to mentioned without a data list it works fine:
Without Data List Demo

Try like this. i change your filter function syntax and also add select tag to dataList.
Edit:
Your problem cuase for datalist id. i.e your datalist ids in ne-repeat are same. i change datalist ids by adding $index to it. now it work correctly.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ["$scope",function MyCtrl($scope) {
$scope.movieThemes = [ 'Fiction', 'Drama'];
$scope.movies=[
{theme:'Drama', movie:'One million dollar baby'},
{theme:'Drama', movie:'Green mille'},
{theme:'Fiction', movie:'Avatar'},
{theme:'Fiction', movie:'The Hobbit'}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat= "t in movieThemes">
<input type="text" ng-model="t" />
{{t}} - {{$index}} <input type="text" placeholder="Users" list="movieList{{$index}}">
<datalist id="movieList{{$index}}">
<select>
<option ng-repeat="m in movies|filter:{theme:t}" value="{{m.movie}} - {{t}}"></option>
</select>
</datalist>
</div>
</div>

You can use groupBy filter. This way you don't need wot worry about themes array. You can write your own/use angular filters module.(https://github.com/a8m/angular-filter)
<ul>
<li ng-repeat="(key, value) in movies| groupBy: 'theme'">
Group name: {{ key }}
<ul>
<li ng-repeat="m in value">
player: {{ m.movie}}
</li>
</ul>
</li>
</ul>
BTW I like angular filters modules

Angular-js - Populating Checkbox and track it based on JSON file

I have a nested Objects in JSON, and I need to populate the checkbox based on what comes in (dynamic) from JSON file, meaning, I wouldn't know in advance the name of the fields, or how many elements there could be. Here is a sample, but there could be more child and each child could have more or less item in it.
{
"Parent":{
"Child" :
{
"Child_01" : {
"description_01":false,
"description_02":false,
"description_03":false,
"description_04":false,
"description_05":false
},
"Child_02" :
{
"something_01":false,
"something_02":false,
"something_03":false,
"something_04": false
},
"Child_03" :
{
"things_01":false,
"things_02":false,
"things_03":false,
"things_04":false,
"things_05":false
}
}
}
}
Now, I need to populate a drop down from it, (child_01, child_02, child_03....) and when user choose one of them, I need to display checkboxes of all its properties. And of course be able to keep track of the chosen one.
Here is what I have.
$scope.children = response.data.parent.child;
$scope.childrenList = [];
angular.forEach($scope.children, function(value1, key1){
$scope.childrenList.push(key1);
});
and html:
<div ng-repeat="(key, data) in children">
<input ng-model="childrenListModel" type="checkbox" name="{{child}}" value="{{child}}">{{child}}</input>
</div>
Nothing works the way I intend to. Any help would be appreciated.

You probably need several nested ng-repeats. Have a look at this working plunker: http://plnkr.co/edit/K92JI7UlW9h6gh8SPeU5?p=preview
<div ng-repeat="child in children.Parent.Child">
<div ng-repeat="options in child">
<div ng-repeat="option in options">
<div ng-repeat="(key, val) in option">
<label for="{{key}}">
{{key}}
<input name="{{key}}" type="checkbox" ng-model="option[key]" />
</label>
</div>
</div>
<hr />
</div>
</div>

Binding Object key with value in ng-model

I have a object which holds the key and value pair.
$scope.groups= {
1050 : 'Test',
1850 : 'Test1'
}
$scope.AnotherArray = [1050,1850];
item from ng-repeat is passed to the object as key to obtain the text 'Test'
<div ng-repeat="item in AnotherArray">
<input type="text" ng-model="groups[item]" />
</div>
Is there a way in angular to do this ?

As you were asking for an "Angular-way" to do this, here is a mildly modified version of Angular's ngRepeat example:
<div ng-repeat="(key, obj) in groups">
[{{key}}] {{obj}}
<input type="text" ng-model="obj"/>
</div>
http://plnkr.co/edit/0IRvLZpbUZUQBXOnebOt?p=preview
It makes use of Angular's internal conversion of array-like objects.
Link to Angular's ngRepeat-documentation: https://docs.angularjs.org/api/ng/directive/ngRepeat

Bind to ng-model filter dynamically

I want to filter questions out by clicking on their associated category name checkbox. Ex: only questions with category X will be shown if only category X checkbox is checked.
I'm able to bind the names Cat1, Cat2, etc directly to the catfilters object:
<input type="checkbox" ng-model="catfilters.Cat1" /> Cat 1
<input type="checkbox" ng-model="catfilters.Cat2" /> Cat 2
<ul>
<li ng-repeat="q in questions | bycategory:catfilters">{{q.question.cat_id}}</li>
</ul>
This works.
However, I want to dynamically create the category checkboxes from a list in the controller, and bind them to the catfilters object:
$scope.cats = [
'Cat1',
'Cat2',
'Cat3'
];
//c is 'Cat1', 'Cat2', etc...
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters.c">{{c}}</span>
</div>
<ul>
<li ng-repeat="q in questions | bycategory:catfilters">{{q.question.cat_id}}</li>
</ul>
But for some reason, this will not apply the filtering. I am not getting any errors though.
Note: I've also tried looking up by indexed property:
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters[c]">{{c}}</span>
</div>
This also does not work
Filter:
angular
.module('DDE').
filter('bycategory', function() {
return function (questions, categories) {
var items = {
categories: categories,
out: []
};
angular.forEach(questions, function (value, key) {
if (this.categories[value.question.cat_id] === true) {
this.out.push(value);
}
}, items);
return items.out;
};
}
);

catfilters.c looks for a property called c in catfilters, regardless of if you have a variable c elsewhere.
Try looking it up by the indexed property catfilters[c] instead.
//c is 'Cat1', 'Cat2', etc...
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters[c]">{{c}}</span>
</div>

I have made a plunkr. I implement using
<div ng-repeat="input in inputs">
<input type="text" ng-model="filter[input]">
</div>
and
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
It is working fine (which i think is similar to your scenario).There must be something error in your implementation.