Loop concept in Angular js

Angular js is providing very easy way to do looping and binding the data into view .You can define the looping concept in controller and can do binding very easily in the view.

Sample JSON structure

 
[
 {
  name : John ,
  age : 16 
 },
 {
  name : John2 ,
  age : 21 
 },
 {
  name : John3 ,
  age : 16 
 },
]
 

Suppose this is the json you are getting from the service .This we have to display in the View

Example of Controller

 
angular.module('sampleproject').controller( 'SampleController',
function ($rootScope, $scope ,samplefactoryService )
{
$scope.onSample = function()
{
 samplefactoryService.myServicefunction( $scope.list ,
 function(data)
 {
 $scope.datalists = data ;// response from service
 },
 function( data)
 {
  //error
 });
};
});
 

We assigned our data (response from service / sample json) to $scope.datalists

Loop in View

Very easy to execute loop concept using Angular JS

 
 <div ng-repeat="datalist in datalists">
  <span>Name : {{ datalist.name }}</span>
  <span>Age : {{ datalist.age }}</span>
 </div>
 

You can filter the loop very easily in view itself .This is an advantage of Angular js .

 
<div ng-repeat="datalist in datalists | filter:{age:"16"}">
 <span>Name : {{ datalist.name }}</span>
 <span>Age : {{ datalist.age }}</span>
</div>
 

Now it will display only those details which have age 16. If you are facing any issues with quotation ( “16”) , you can try filter:{age:"16"}

Related Posts

1. Communicate with controllers in angular js

2. Rating Stars using angular js Directive concept

3. Angular routing

4. Filtering concept in angular js