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