AngularJS ng-repeat डिरेक्टिव

एंजुलरजेएस रेफरेंस मैनुअल

वर्णन और उपयोग

ng-repeat डिरेक्टिव एक समग्र एचटीएमएल को निर्दिष्ट बार दोहराता है。

एचटीएमएल सेट में प्रत्येक एलिमेंट एक बार दोहराया जाएगा。

सेट आयत्त या ऑब्जैक्ट होना चाहिए。

ध्यान दें:प्रत्येक दोबारा की इस्तेमाल की गई नस्ल को अपना वहां प्रभावी होता है, जो वर्तमान प्रोजेक्ट है।

अगर आपके पास एक ऑब्जैक्ट सेट हैng-repeat डिरेक्टिव एचटीएमएल तालिकाओं के निर्माण के लिए अच्छा रहता है, प्रत्येक ऑब्जैक्ट के लिए एक तालिका पट्टी दिखाता है और प्रत्येक ऑब्जैक्ट गुण के लिए एक तालिका डाटा दिखाता है। नीचे का उदाहरण देखें।

उदाहरण

उदाहरण 1

records रेकॉर्ड्स में प्रत्येक एलिमेंट के लिए एक शीर्षक लिखें:

<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "Alfreds Futterkiste",
        "Berglunds snabbköp",
        "Centro comercial Moctezuma",
        "Ernst Handel",
    ]
});
</script>
</body>

अपने आप एक प्रयोग करें

उदाहरण 2

records रेकॉर्ड्स में प्रत्येक एलिमेंट के लिए एक तालिका पट्टी लिखें:

<table ng-controller="myCtrl" border="1">
    <tr ng-repeat="x in records">
        <td>{{x.Name}}</td>
        <td>{{x.Country}}</td>
    </tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
       {
            "Name" : "Alfreds Futterkiste",
            "Country" : "Germany"
        },{
            "Name" : "Berglunds snabbköp",
            "Country" : "Sweden"
        },{
            "Name" : "Centro comercial Moctezuma",
            "Country" : "Mexico"
        },{
            "Name" : "Ernst Handel",
            "Country" : "Austria"
        }
    ]
});
</script>

अपने आप एक प्रयोग करें

उदाहरण 3

ऑब्जैक्ट के प्रत्येक गुण के लिए एक तालिका पट्टी लिखें:

<table ng-controller="myCtrl" border="1">
    <tr ng-repeat="(x, y) in myObj">
        <td>{{x}}</td>
        <td>{{y}}</td>
    </tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myObj = {
        "Name" : "Alfreds Futterkiste",
        "Country" : "Germany",
        "City" : "Berlin"
    }
});
</script>

अपने आप एक प्रयोग करें

व्याकरण

<एलीमेंट ng-repeat="एक्सप्रेशन</एलीमेंट>

सभी एचटीएमएल एलीमेंट इसका समर्थन करते हैं。

पैरामीटर

पैरामीटर वर्णन
एक्सप्रेशन

समूह को परिपथित करने के लिए व्यक्ति करने का अभिव्यक्ति

वैध एक्सप्रेशन के उदाहरणः

x in records

(key, value) in myObj

x in records track by $id(x)

एंजुलरजेएस रेफरेंस मैनुअल