Basic understanding of Angular js ng-repeat directive for beginners

Hey guys,

One of the most useful looping directive of angular js is ng-repeat. First you need to understand the basic array / object structure in javascript then it will be easy for you while doing tweaks with looping concepts.

Simply I can say js array is the elements between [ and ] and the object is the elements between { and }

Example array and objects here

var cars = [‘Xylo’,’Scorpio’,’XUV’,’Bolero’]; // is a js array the elements

var cars = {mahindra:’Xylo’,tata:’Nano’}; // is a js object

Hope now you got the difference between the object and array in js.

Lets see the basic example of angular js ng-repeat directive with a js array

<div ng-repeat=’car in cars’> — Lets say the array would be [‘Xylo’,’Scorpio’,’XUV’,’Bolero’];

{{car}}

</div>

The output would be :

Xylo
Scorpio
XUV
Bolero

If you use js object then you have to call by key

var cars = [{name:’Xylo’,brand:’Mahindra’},{name:’Nano’,brand:’TATA’},{name:’Sunny’,brand:’Nissan’}];

ng-repeat=’car in cars track by car.brand’>

{{car.brand}} – {{car.name}}

The output would be

Mahindra – Xylo
Nissan – Sunny
TATA – Nano

Note: The track by is like order by in our sql query.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s