top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What is Looping in AngularJs. Give an Example?

+5 votes
400 views
What is Looping in AngularJs. Give an Example?
posted Jan 28, 2015 by Muskan

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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"}

answer Jan 25, 2017 by Manikandan J
...