I have a Json data like this
Object {Science: Array[3], Accounts: Array[3], History: Array[3], Mathematics: Array[3]}
Accounts: Array[3]
0: Object
1: Object
2: Object
length: 3
History: Array[3]
Mathematics: Array[3]
Science: Array[3]
Now to render this data in HTML page like this
<h1> Accounts</h1>
<div> Object </div>
<div> Object </div>
..................
You can use ng-repeat directive with JSON Data like this example:
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Fiddle Demo With Array
And You can even show your nested objects using ng-repeat directive like this:
<ul ng:controller="Cntl">
<li ng:repeat="item in data">
{{item.name}} has children:
<ul>
<li ng:repeat="child in item.children">{{child.name}} has grant-children:
<ul><li ng:repeat="gch in child.children">{{gch.name}}</li></ul>
</li>
</ul>
</li>
</ul>
<script>
function Cntl() {
this.data = [{
name: '1',
children: [{
name: '11',
children: [{
name: '111'}, {
name: '112'}]}, {
name: '12',
children: [{
name: '121'}, {
name: '122'}]}]}, {
name: '2',
children: [{
name: '21'}, {
name: '22'}]
}];
}
</script>
Fiddle Demo With Nested Objets
Got my answer
<div class="panel" ng-repeat="(subject, activities) in Activities">
<h3 class="panel-title followMeBar">{{subject}}</h3>
<div class="panel-body">
<ul class="list-group">
<div class="row list-group-item" ng-repeat="activity in activities">
<div class="col-xs-4">
<img class="scale-notebook-image" src={{activity.fileTypeImg}}>
</div>
<div class="col-xs-8">
<div>{{activity.fileTitle}}</div>
<div>by {{activity.createdBy}}</div>
</div>
</div>
</ul>
</div>
</div>
Related
How can I use ng-repeat to loop over data that contains many nested array data?
I have data that will have many "Segments"
Example:
confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber
I have done both ng-repeat with angular, and without angular I would end up resorting to javascript that loops over data and creates the html dynamically, but I wish to do this the ANGULAR way.. HOW?
HTML with Angular/Javascript Arrays:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<span style="font-weight: bold;">Flight</span>
</div>
<div class="col-md-4">
<span style="font-weight: bold;">Departs</span>
</div>
<div class="col-md-4">
<span style="font-weight: bold;">Arrives</span>
</div>
</div>
<div class="row">
<div class="col-md-4">
{{confirm.booking.flightData[0].Segments[0].FlightNumber}}
</div>
<div class="col-md-4">
({{confirm.booking.flightData[0].Segments[0].DepartureAirport}})
</div>
<div class="col-md-4">
({{confirm.booking.flightData[0].Segments[0].ArrivalAirport}})
</div>
</div>
</div>
Nesting can be done in repeats, but repeating too much in ng-repeats can be costly in terms of performance as angular creates scopes for each element repeated. Hence, filtering data till the perfect abstracted values that you need in terms of html should be done in the js file.
For eg: if u need only segements in the html form do this, or if u need even flight data in html form follow #Rachel's post
<ul data-ng-repeat="item in confirm.booking.flightData[0].Segments">
<li>{{ item.FlightNumber}}</li>
</ul>
Let's say your data is in flightdetails, then you can go about it like this:
<div ng-repeat="a in flightdetails ">
<div ng-repeat="b in a.booking">
<div ng-repeat="c in b.flightdata">
<div ng-repeat="d in c.segments">
{{d.flightnumber}}
</div>
</div>
</div>
</div>
You can use nested ng-repeat to bind your data - see a demo below:
angular.module("app", []).controller("ctrl", function($scope) {
$scope.confirm = {
booking: {
flightData: [{
Segments: [{
FlightNumber: 1
}, {
FlightNumber: 2
}]
}, {
Segments: [{
FlightNumber: 3
}, {
FlightNumber: 4
}]
}]
}
}
// console.log($scope.confirm);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="wrapper" ng-app="app" ng-controller="ctrl">
<div ng-repeat="x in confirm.booking.flightData">
Data {{$index + 1}}:
<div ng-repeat="y in x.Segments">
<div>Flight No: {{y.FlightNumber}}</div>
</div>
<br/>
</div>
</div>
If you want to display only the following:
confirm.booking.flightData[0].Segments[0].FlightNumber
confirm.booking.flightData[0].Segments[1].FlightNumber
confirm.booking.flightData[0].Segments[2].FlightNumber
then you can use limitTo - see demo below:
angular.module("app", []).controller("ctrl", function($scope) {
$scope.confirm = {
booking: {
flightData: [{
Segments: [{
FlightNumber: 1
}, {
FlightNumber: 2
}]
}, {
Segments: [{
FlightNumber: 3
}, {
FlightNumber: 4
}]
}]
}
}
// console.log($scope.confirm);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="wrapper" ng-app="app" ng-controller="ctrl">
<div ng-repeat="x in confirm.booking.flightData | limitTo : 1">
Data {{$index + 1}}:
<div ng-repeat="y in x.Segments">
<div>Flight No: {{y.FlightNumber}}</div>
</div>
<br/>
</div>
</div>
I created an example here:
http://codepen.io/ackzell/pen/ENBymo
It ultimately looks like this, but check the pen as it has some more info:
<ul>
<li ng-repeat="flight in vm.flightData">
<ul>
<li ng-repeat="segment in flight.Segments">
<em>FlightNumber</em> {{ segment.FlightNumber }}
<br />
<em>Departure:</em> {{ segment.DepartureAirport }}
<br />
<em>Arrival:</em> {{ segment.ArrivalAirport }}
</li>
</ul>
</li>
</ul>
Nesting ng-repeats would help, but maybe you want to give your data some treatment first.
please am very new new to angular and am trying to do something i don't know if its possible. I have a json data and i want to render the option on click of an item. What i want to achieve is to show models of a phone on click of the name, and on click of a phone model show all the phone parts. But whenever i click on a phone i get undefined in my console.
my app.js file
(function(){
var app=angular.module('repairshop',[]);
app.controller('phoneController',function($scope){
this.phones = [
{
name: 'Apple',
model: [{ name: 'Iphone 5'}, {name: 'Iphone 6'},{name: 'Iphone 6s'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
},
{
name: 'Samsung',
model: [{ name: 'S4'}, {name: 'S5'},{name: 'S6'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
},
{
name: 'Nokia',
model: [{ name: 'Lumia'}, {name: '3310'},{name: 'Asha'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
},
{
name: 'Blackberry',
model: [{ name: 'Passport'}, {name: 'Touch 10'},{name: 'Asha'}],
part: [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
}
];
$scope.loadModels=function(phone)
{
var phone=phone.name;
console.log (phone);
}
});
})();
My Html View
<div class="phones_wrapper row">
<!--begin container-->
<div class="container">
<form class="" action="#" method="post" ng-controller="phoneController as phone" >
<div class="row">
<div class="col-md-3 phone_display center" ng-repeat="p in phone.phones">
<label>
<input type="radio" ng-click="loadModels(phone)" ng-model="phone.name" name="phone" ng-value="{{p.name}}" />
<img src="http://placehold.it/200x200">
</label>
<p class="text text-center phone_name">{{p.name}}</p>
</div>
</div>
</form>
</div>
<!--begin container-->
</div>
Here is a simple example plnkr on how you can click on the list of the items you describe to view more details such as models and parts.
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="phone in phones" ng-click="showModels = true">{{phone.name}}
<ul ng-show="showModels">
<li ng-repeat="model in phone.model" ng-click="showParts = true">{{model.name}}
<ul ng-show="showParts">
<li ng-repeat="part in phone.part">
{{part.name}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Basically what you have to do is add repeaters and ng-click events to expand the content. I am pretty sure that from this example you will be able to fix it with your own styling and markup.
Edit:
A better example where you can toggle the viewing of models and parts.
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="phone in phones" ng-click="showModels = !showModels; $event.stopPropagation()">{{phone.name}}
<ul ng-show="showModels">
<li ng-repeat="model in phone.model" ng-click="showParts = !showParts; $event.stopPropagation()">{{model.name}}
<ul ng-show="showParts">
<li ng-repeat="part in phone.part">
{{part.name}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
I found it, i changed the loadModels function to
$scope.loadModels=function(phone)
{
phone.parent=phone.name;
console.log (phone);
}
and also changed the phone to p based on #Praneeth Gudumasu recommendation. Thank you
it should be like this
<div class="col-md-3 phone_display center" ng-repeat="p in phone.phones">
<label>
<input type="radio" ng-click="loadModels(p)" ng-model="p.name" name="phone" ng-value="{{p.name}}" />
<img src="http://placehold.it/200x200">
</label>
<p class="text text-center phone_name">{{p.name}}</p>
</div>
you should use the repeating object inside the repeating template and not the scope object(in your case variable "p" not "phone")
I've created a simple app that should iist each item from a model in a list, created using a javascrit template.
Fiddle
Html:
<div id="tagsList" class="box">
<div class="box-head">
<h2 class="left">Tags</h2>
</div>
<div class="box-content">
<input type="text" placeholder="Add New Tag" />
<button>+ Add</button>
<div data-bind="template: 'tagsTempl'"></div>
</div>
</div>
<script id="tagsTempl" type="text/html">
<ul>
{{each tags}}
<li class="tagItem">
<span>${Name}</span>
<div>
Edit
Delete
</div>
</li>
{{/each}}
</ul>
</script>
Javascript:
$(function () {
//$("#tagDialog").hide();
var data = [
{ Id: 1, Name: "Ball Handling" },
{ Id: 2, Name: "Passing" },
{ Id: 3, Name: "Shooting" },
{ Id: 4, Name: "Rebounding" },
{ Id: 5, Name: "Transition" },
{ Id: 6, Name: "Defense" },
{ Id: 7, Name: "Team Offense" },
{ Id: 8, Name: "Team Defense" }
];
var viewModel = {
tags: ko.observableArray(data),
tagToAdd: ko.observable(""),
addTag: function() {
this.tags.push({ Name: this.tagToAdd() });
}
}
ko.applyBindings(viewModel)
});
Output of list:
{{each tags}}
${Name}
Edit Delete
{{/each}}
The scripts file is accessible through viewing source. I'm not sure where my error is. Any help?
I updated your fiddle. Now it is working like you want it to: The list of tags is being rendered using the knockout standard method as described in the docs.
HTML
<ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul>
Template
<script id="tagsTempl" type="text/html">
<li class="tagItem">
<span data-bind="text: Name"></span>
<div>
Edit
Delete
</div>
</li>
</script>
Also I connected the viewmodel to the view.
For example:
<button data-bind="click: addTag">+ Add</button>
You simply forgot most of it. I suggest you follow the interactive tutorials on how to do this.
My custom directive is not working:
html:
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<div>
<h3>
<product-title></product-title>
</h3>
...
javascript.app:
...
app.directive('productTitle', function(){
return {
restrice: 'E',
templateUrl: 'product-title.html'
};
});
...
and my product-title.html:
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
in my html page i cant see the product name and product price.
I am new in this subject :)
what should i do to make it work?
please help me.
++thanks everyone for yours answers, it is works! i tried for 3 days to find an answer.. and you did it in 5 min.. thanks! :)++
Couple of issues:
restrict is spelled wrong
Templates for html should have one root, so you should do something like this
<div>
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
</div>
Here is the complete running code for your directive in this JSBin
JS
angular
.module('app', [])
.controller('AppController', function ($scope) {
$scope.store = {
products: [
{ id: 1, price: 132, name: 'abc' },
{ id: 2, price: 127, name: 'def' },
{ id: 3, price: 112, name: 'mno' },
{ id: 4, price: 145, name: 'xyz' }
]
};
})
.directive('productTitle', function(){
return {
restrict: 'E',
templateUrl: 'product-title.html'
};
});
HTML
<div ng-controller='AppController'>
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
<product-title></product-title>
</h3>
</li>
</ul>
</div>
<script id="product-title.html" type="text/ng-template">
{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>
</script>
The array is structured like so
$scope.structure = {
sections: [{
id:0,
sectionItems: []
},{
id:1,
sectionItems: []
},{
id:2,
sectionItems: []
}]
};
I have a nested ng-repeat so I can show items within sectionItems[]
(Inside should be objects and one of the keys is Name - not relevant)
<div ng-repeat="sections in structure.sections" class="col-md-12">
<div class="panel panel-info">
<ul class="screenW-section">
<li class="col-xs-6" ng-repeat="item in sections.sectionItems"
ng-click="item.splice($index, 1)">
{{item.Name}}
</li>
</ul>
</div> </div>
I want to be able to remove items on click but the
ng-click="item.splice($index, 1)
Is not working no matter how I format it.
try this:
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.structure = {
sections: [{
id:0,
sectionItems: ['1','2','3']
},{
id:1,
sectionItems: ['11','21','32']
},{
id:2,
sectionItems: ['12','22','32']
}]
};
$scope.remove = function(sectionItems,index){
sectionItems.splice(index, 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="sections in structure.sections" class="col-md-12">
<div class="panel panel-info">
<ul class="screenW-section">
<li class="col-xs-6" ng-repeat="item in sections.sectionItems"
ng-click="remove(sections.sectionItems,$index)">
{{item}}
</li>
</ul>
</div> </div>
</div>
To remove an item you need to remove it from the array.
So, for example, you could do
ng-click="remove(sections.sectionItems, $index)"
in the view, and
$scope.remove = function(array, index) {
array.splice(index, 1);
}
in the controller...
You're calling splice on the item and not the array
ng-click="sections.sectionItems.splice($index, 1)"