ng-repeat

What is ng-repeat:ng-repeat used to bind data from a collection.
Something like in foreach loop ( it only for how it is works but its operations are differ )..
Description of ng-repeat:It is used to bind data by operation on a list or an array , it may be list of objects or list of elements. it is iterated the element on which ng-repeat is given. no of interactions are equal to length if given list or array and each has its own different scope..
Syntax of ng-repeat:
<element ng-repeat="a in list or array">

</element>

<element ng-repeat="(key,value) in list or array">


</element>
How to Use ng-repeat/ng-repeat Example::

Example 1:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-repeat with an array
            <br />
            <div ng-repeat="value in data">
               Value: {{value}}
            </div>
        </div>
    </div>
</div>
<script>
    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
        $scoep.data=[1,2,3,4,5,6]
    });
</script>
O/p:
Angularjs Example of ng-repeat with an array
Value:1
Value:2
Value:3
Value:4
Value:5
Value:6
Example 2:
<div ng-app="webapp">
    <div ng-controller="angularjsexampleCtlr">
        <div>
            Angularjs Example of ng-repeat with a list
            <br />
            <div ng-repeat="obj in list">
                SN0 :{{$index+1}} Country Name: {{obj.Name}}
            </div>
        </div>
    </div>
</div>
<script>
    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {
        $scoep.list = [
            { Id: 1, Name: 'INDIA' },
            { Id: 2, Name: 'USA' },
            { Id: 3, Name: 'CHINA' },
            { Id: 4, Name: 'RUSSIA' },
        ]
    });
</script>
O/P:
Angularjs Example of ng-repeat with a list
SN0 :1 Country Name:INDIA
SN0 :2 Country Name:USA
SN0 :3 Country Name:CHINA
SN0 :4 Country Name:RUSSIA


No comments :

Post a Comment