JSFiddle
I'm not able to access the array images in the nested collection. Why am I not able to see any output?
The model:
var obj = [{
"id": "7",
"date": "1 Jan",
"images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}, {
"id": "7",
"date": "1 Jan",
"images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
}];
This is the HTMl with ng-repeat:
<ul>
<li ng-repeat="img in item">
<br />
<li ng-repeat="img1 in img.images">{{img1}}</li>
</li>
</ul>
Can anyone point me to what I'm missing?
The problem is you are trying to repeat a list of li elements inside of a li element, which is invalid HTML. As such, angular will not render this.
Update your HTML to:
<ul>
<li ng-repeat="img in item">
<ul>
<li ng-repeat="img1 in img.images">{{img1}}</li>
</ul>
</li>
</ul>
Related
I have a JSON object like the following:
{
"name": "cameraasd_main_autofocus",
"value": "Lasasd autofocus",
"displayName": "Autofocus"
},
{
"name": "screen_siasdze",
"value": "5.2\asd",
"displayName": "Sdascreen Size",
"group": "General"
},
{
"name": "camera_maindas_features",
"value": "Digital Zoom,das Auto Flash, Digital image stabilization"
"displayName": "Features"
},
In this data object I only want to target the element which have the group attribute with ng-repeat. And I have to further group out the elements with a particular group. For example from the whole object the elements with group value "General" should be separated from the rest of the elements.
You can create a scope variable to store the filtered items that have property "group" like below
var data = [{
"name": "cameraasd_main_autofocus",
"value": "Lasasd autofocus",
"displayName": "Autofocus"
},
{
"name": "screen_siasdze",
"value": "5.2asd",
"displayName": "Sdascreen Size",
"group": "General"
},
{
"name": "camera_maindas_features",
"value": "Digital Zoom,das Auto Flash, Digital image stabilization",
"displayName": "Features"
}];
$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group")});
and then use ng-repeat in UI
<ul>
<li ng-repeat="item in filteredData">
{{item.name}} || {{item.value}}
</li>
</ul>
Here is a working sample : https://jsfiddle.net/Lt7aP/8267/
Edit : if you want to separate out the elements based on a particular group name then you can try the below code
$scope.filteredData = data.filter(function(x){ return x.hasOwnProperty("group") && x.group == "General"});
in this case only General groups will be displayed.
<div ng-repeat="x in records">
<div ng-if="x.group"> {{x.name}} </div>
</div>
try out if this works!! Good Luck!
Supposing your JSON contains an array (which is not show in your json but i assume it's there).
First, parse your JSON to a JsonObject, then get it as an array
JSONArray jsonArray = new JSONArray(jsonString);
Then you can do this in your html
<div ng-repeat="elem in jsonArray">
<a ng-if="elem.group">{{ elem.property }}</a>
</div>
Check this code.
<div>
<h3>With Group</h3>
<div ng-repeat="d in data">
<div ng-if="d.group">
{{d.name}}
</div>
</div>
</div>
<div>
<h3>Without Group</h3>
<div ng-repeat="d in data">
<div ng-if="!d.group">
{{d.name}}
</div>
</div>
</div>
I'm using Angular and trying to create nested ng-repeats. I've referred to the ng-repeat examples on the Angular site here here. But when I use the code below, the <ul> tag repeats but the <li> tag is blank. Any suggestions on how to do this correctly?
(EDIT: Updated array to address comment)
Array:
vm.projects = [
{"$id": "1234",
"people": {
"-K-v76MWDTIQqnR2w10r": {
"name": "John Doe",
"city": "New York",
"company": "Acme, Inc."
},
"-K-q7HmGUduAf5JkSGDY": {
"name": "Jane Smith",
"city": "Chicago",
"company": "ABC, Inc."
}
}
},
{
"$id": "2345",
"people": {
"-K-qq6Pcd0v1wggmALcZ": {
"name": "David Jones",
"city": "London",
"company": "Stardust, LLC"
}
}
}
]
HTML
<ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
<li ng-repeat="name in vm.projects.people.name track by projects.$id">{{project.person.name}}
</li>
</ul>
Here is what actually displays:
ID: 1234
ID: 2345
You can use parent ul project object in li like below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example85-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>
</head>
<body ng-app="initExample">
<script>
angular.module('initExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.projects = [{"$id":"1234","people":{"-K-v76MWDTIQqnR2w10r":{"name":"John Doe","city":"New York","company":"Acme, Inc."},"-K-q7HmGUduAf5JkSGDY":{"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}}},{"$id":"2345","people":{"-K-qq6Pcd0v1wggmALcZ":{"name":"David Jones","city":"London","company":"Stardust, LLC"}}}];
}]);
</script>
<div ng-controller="ExampleController">
<ul ng-repeat="project in projects" >ID: {{project.$id}}
<li ng-repeat="(id, person) in project.people">{{person.name}}
</li>
</ul>
</div>
</body>
</html>
You want to do something like (in your inner ng-repeat):
name in project.people
Instead of
name in vm.projects.people.name track by projects.$id
(If you post a valid JSON sample I can give you the exact thing to put.)
you can use like this
<ul>
<li ng-repeat="c in countries">
<label>
<input type="checkbox" ng-model="CountryName" />
{{c.CountryName}}
</label>
<ul ng-repeat="s in cities" ng-if="c.CountryId==s.CountryId">
<li>
<label>
<input type="checkbox" ng-model="CityName" />
{{s.CityName}}
</label>
</li>
</ul>
</li>
</ul>
refere below url http://www.codeproject.com/Tips/987499/Nested-Ng-Repeat-on-AngularJS
First it's important to point out that there were some significant syntax issues in your JSON which was breaking your ng-repeats.
You must refer to the object inside your first ng-repeat (the one you declare in the ul tag) to make sure the scope is mapped properly for the li tag scopes. In my example "someKey" refers to the alpha numeric strings you had. You will need to make sure these are the same in each son structure in order to refer to them properly. This is why I changed the name to "someKey". My suggestion is to use a key named "data" and then use "id" to keep track of the name of the data you are using for your key. Example:
{"$id": "1234",
"people": {
id: "-K-v76MWDTIQqnR2w10r",
data: {
"name": "John Doe",
"city": "New York",
"company": "Acme, Inc."
},
Here's the code:
$scope.vm = {};
$scope.vm.projects = [
{$id:"1234",
"people":[
{"someKey":
{"name":"John Doe","city":"New York","company":"Acme, Inc."}
},
{"someKey":
{"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}
}]
},
{$id:"2345",
"people":[
{"someKey":
{"name":"David Jones","city":"London","company":"Stardust, LLC"}
}]
}
]
<div ng-controller="MyCtrl">
Hello, {{name}}!
<ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
<li ng-repeat="people in project.people">{{people.someKey.name}}
</li>
</ul>
</div>
I am trying to make a filter using an array of object. but I am not getting the answer as per I requested.
the object the one I looping though has 3 steps of arrays. I am trying to filter them and show in the li element but not working. only the first step works for me.
the array is : "Name,SubProjectsandContracts` ( all are nested inside of the main object)
here is my try:
<div class="section filter1">
<ul>
<li ng-repeat="value in values"> {{value.Name}}</li>
</ul>
</div>
<div class="section filter2">
<ul>
<li ng-repeat="value in values | SubProjects"> {{$index}}</li>
</ul>
</div>
<div class="section filter3">
<ul>
<li ng-repeat="value in values | SubProjects | Contracts"> {{value.Name}}</li>
</ul>
</div>
object for sample :
{
"Id": "1",
"Name": "Khalifa International Stadium",
"SubProjects": [
{
"Contracts": [
{
"CompletedPercentage": 0,
"Id": "583",
"Name": "LP/C21/145",
"Phase": null
},
{
"CompletedPercentage": 0,
"Id": "529",
"Name": "KP/B21/134",
"Phase": null
},
{
"CompletedPercentage": 0,
"Id": "575",
"Name": "LP/C21/142",
"Phase": null
}
],
"Id": "2",
"Name": "Energy Center"
},
Live Demo
You need to build the custom filter according to your requirement here. See this example, and let me know if you face any issue with your case. For documentation please check. A more simple example with same approach.
<input type="text" ng-model="search">
<ul ng-repeat="oneauth in authorisations[0]">
<li ng-repeat="entry in oneauth | nameFilter:search">
{{entry.auth.name}}</li>
</ul>
app.filter('nameFilter', function(){
return function(objects, criteria){
var filterResult = new Array();
if(!criteria)
return objects;
for(index in objects) {
if(objects[index].auth.name.indexOf(criteria) != -1) // filter by name only
filterResult.push(objects[index]);
}
console.log(filterResult);
return filterResult;
}
});
I am having a tough time with ng-repeat using Angular.
My JSON data looks like this
{
"shows": {
"stations": {
"balaton": [{
"name": "Minimal",
"artist": "Sven Tasnadi",
"duration" : "1H"
}, {
"name": "Forest of Love",
"artist": "Bas Ibelini",
"duration" : "2H"
}, {
"name": "Sound of Underground",
"artist": "Potential Badboy",
"duration" : "2H30"
}],
"djradio": [{
"name": "Strickly Electronica",
"artist": "Culptrate",
"duration" : "1H"
}, {
"name": "Sound of Underground",
"artist": "Potential Badboy",
"duration" : "2H"
}, {
"name": "Sound Time",
"artist": "Leona Graham",
"duration" : "2H30"
}]
}
}
}
In my controller, I set the object to a scope.
$http.get('json/show-schedule.json').success(function(res){
$scope.schedule = res.shows.stations;
});
In my HTML,
<div class="schedule-station" ng-repeat="item in schedule">
<div class="schedule-station-logo" style="background-image:url('img/stations/{{balaton}}.png')"></div>
<ul>
<li class="schedule-duration-{{item.duration}}">
<span class="schedule-time">11PM</span>
<span>{{item.name}}</span>
<i><span>{{item.artist}}</span></i>
</li>
</ul>
</div>
Basically, I have a DIV that needs to be created based on how many stations there are in the JSON. Then, I need to get the station name, which is 'Balaton', and 'DJRADIO', this should be placed in my background-image such as balaton.png.
Then the List Item should be repeated based on how many tracks there in that particular station.
I am having a tough time figuring out how to do this, and my attempts are obviously way off.
Try something like this:
<div class="schedule-station" ng-repeat="(station, tracks) in schedule">
<h2>{{station}}</h2>
<div class="schedule-station-logo" style="background-image:url('img/stations/{{station}}.png')"></div>
<ul>
<li ng-repeat="track in tracks" class="schedule-duration-{{item.duration}}">
<span class="schedule-time">11PM</span>
<span>{{track.name}}</span>
<i><span>{{track.artist}}</span></i>
<b>{{track.duration}}</b>
</li>
</ul>
</div>
Check the demo fiddle
So there are a few things to consider here:
1) You have an object containing the stations, where it's a key, val set of items, where the values of the station property is an array of the songs. If the stations were an array, then you could do something like stations.length, but because it's a set of object properties, we need to count them manually, hence the angular.forEach.
$scope.schedule = data.shows.stations;
$scope.stationCount = 0;
angular.forEach($scope.schedule, function(station){
$scope.stationCount++;
});
2) To place each of the songs, we have to nest another ng-repeat so that we can iterate over each of the songs in the array.
3) The ng-repeat on the outside has to be setup for an object, and not an array, as you have in your original html.
I made a plnkr showing how to do everything for you: http://plnkr.co/edit/ca8WxSEvn00rYVfwN82r?p=preview
See ngRepeat documentation
It is possible to get ngRepeat to iterate over the properties of an
object using the following syntax: <div ng-repeat="(key, value) in myObj"> ... </div>
So to you should be able to iterate your collection like this:
<div class="schedule-station" ng-repeat="(stationName, songs) in schedule">
<div class="schedule-station-logo" style="background-image:url('img/stations/{{stationName}}.ng')"></div>
<ul>
<li ng-repeat="item in songs" class="schedule-duration-{{item.duration}}">
<span class="schedule-time">11PM</span>
<span>{{item.name}}</span>
<i><span>{{item.artist}}</span></i>
</li>
</ul>
</div>
I have the following menu items
[ { "name": "Home", "target": "#home", "state": "active", "partial_html": "partials/home.html" }, { "name": "Find", "target": "#find", "partial_html": "partials/find.html", "state": "" }, { "name": "Albums", "target": "#albums", "partial_html": "partials/albums.html", "state": "" } ]
How to use ng-repeat to get following output for each element (mi is an item in array menuItems (array definition was given above).
<li class='divider-vertical'></li>
<li class="{{mi.state}}">{{mi.name}}</li>
You can use ng-repeat-start directive :
<ul>
<li class='divider-vertical' ng-repeat-start="airport in airports"></li>
<li ng-repeat-end class="{{mi.state}}"><a href="{{mi.target}}"
ng-click="setMenuItemActive($event, mi.name)">{{mi.name}}</a></li>
</ul>
I hope it will be helpful too..!
Create and apply a directive on the 2nd LI. Remove the 1st LI from the loop. In the directive, append the 1st LI before the 2nd LI.
Alternatively, a directive can be applied to the parent UL where it will go through each LI and append the divider before it. Not sure if this will work though.
You can also nest ul tag like
<ul>
<li ng-repeat ="..">
<ul>
<li class='divider-vertical'></li>
<li class="{{mi.state}}">{{mi.name}}</li>
</ul>
</li>
</ul>