I'm trying to show the values of a specific JSON in the right Order. My JSON looks like :
{
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}
How to show values with ng-repeat :
<div ng-repeat="item in items">
</div>
like :
A
Andrea
Apple
B
Baby
Bali
C
Candle
Canada
Please check working example: http://plnkr.co/edit/lqoQvmXnimWYzqVU0wkg?p=preview
HTML
<div ng-repeat="(key, values) in items">
{{key}}
<div ng-repeat="item in values">
{{item.name}}
</div>
</div>
you can iterate over the object with:
<div ng-repeat="(key, value) in jsonData">
{{key}}
<div ng-repeat="item in value">
<div>{{item.name}}</div>
</div>
</div>
edit: I see the other guys added jsfiddle so enjoy :)
If your data be like this :
$scope.items={
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}
Consider item as map and iterate for (key,value) in map and the value will be associated List. And again iterate for the list in values as -
<div ng-repeat="(key,value) in items">
{{key}}
<div ng-repeat="item in value">
{{item.name}}
</div>
</div>
Try this plunker.
You print key of your json too so you should use '(key,value)' in ng-repeat to get value of key too.
code:
<div ng-repeat="(key,value) in data">
{{key}}
<div ng-repeat="item in value">
{{item}}
</div>
</div>
Related
I have created ng-repeat by group on which I am applying the filter, everything is working fine but the search functionality is not doing well, means when I am searching an item then its displaying the item but along with other group names are displaying which I want to hide.
when I search for an item then it should display the item along with the group and hide all the groups and other items.
Below is the
<div ng-repeat="(key, value) in pops | groupBy: 'Location'">
<div>
<h4>{{ key }}</h4>
</div>
<br /><br /><br />
<div ng-repeat="pop in value | filter: lookfor | orderBy: 'SortNo'">
<div>
<h4 style="padding-left: 5px; padding-right: 5px;">{{pop.EmpName}}</h4>
</div>
<div>
<div>
<p>Id: {{pop.EmpNo}}</p>
<p>Desig: {{pop.Designation | titlecase}}</p>
</div>
</div>
</div>
</div>
code.
add your js code pls . Or you can create
<input ng-model="lookfor "/>
Try using this and add your filter code in it
HTML
<input type='text' placeholder='look for' ng-model='lookfor'>
Jsfiddle demo
http://jsfiddle.net/qq2L34eb/1/
I want to display Monday but the value attr is equal to one using ng-repeat.
$scope.days = [{
"Mondays": 1
}, {
"Tuesdays": 2
}];
But I got the entire object instead.
http://jsfiddle.net/qq2L34eb/1/
Any clue?
You need to use another ng-repeat inside,
<div ng-controller="MyCtrl">
<span ng-repeat="(key, value) in days">
<span ng-repeat="(key, value) in value">
<input type='checkbox' value="{{value}}" check-list='checked_days'> {{key}}
</span>
</span>
</div>
DEMO
http://jsfiddle.net/sajeetharan/2obrb921/
2 things -
1) Your object array can be changed.
Your $scope.days is an array, it should be object instead.
Like this
$scope.days = {
"Mondays": 1
,
"Tuesdays": 2
}
See fiddle
2) If you don't wish to change object array then add another ng-repeat within that like this. Like #Sajeetharan mentioned -
<span ng-repeat="(key, value) in days">
<span ng-repeat="(key, value) in value">
<input type='checkbox' value="{{value}}" check-list='checked_days'> {{key}}
</span>
</span>
According to your js fiddle in html write---
<span ng-repeat="pp in days">
<input type='checkbox' value="{{pp.key}}" check-list='checked_days'> {{pp.value}}
</span>
In Controller---
$scope.days = [{
"key": "1","value":"Monday"
}, {
"key": "2","value":"Tuesday"
}, ]
you can find result like this--
js fiddle
http://jsfiddle.net/qq2L34eb/2/
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
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>
I want to use ng-repeat object in ng-model value as sub string.. can i use this?? My scenario is:
<form id="booking_form" name="booking_form" ng-app="myApp" ng-submit="tasksubmit()">
<ul class="items-list">
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<div class="items-list-item-image">
<p>
<input type="checkbox" ng-model="tasksubmit{{task.id}}" />
</p>
</div>
<div class="items-list-item-detail">
<p>
<strong>{{task.title}}</strong>
</p>
</div>
</li>
</ul>
</form>
in < input type = checkbox > i want to generate dynamic ng-model with prefix of tasksubmit (this is initialized in controller as $scope.tasksubmit = {} ). Any body please help me out in this problem.....
If I understand correctly you want all task.id as property inside your tasksubmit object as you have initialized it as object in your controller so you can do as below:
<input type="checkbox" ng-model="tasksubmit[task.id]" />
Just add model with ngRepeat's instance property
Like this
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<input type="checkbox" ng-model="task.isChecked" />
</li>
You'll find value of isChecked from $scope.taskslist
JSFIDDLE