دستورالعمل ng-repeat AngularJS

دستورالعمل‌های مرجع AngularJS

تعریف و استفاده

ng-repeat دستورالعمل تکرار یک مجموعه HTML را به تعداد مشخص شده تکرار می‌کند.

هر عنصر از مجموعه HTML یک بار تکرار می‌شود.

مجموعه باید یک آرایه یا شیء باشد.

توجه داشته باشید:هر نمونه تکراری یک حوزه خاص خود را دریافت می‌کند که از عنصر فعلی تشکیل شده است.

اگر یک مجموعه از شیء دارید،ng-repeat دستورالعمل‌ها برای ساخت جدول‌های HTML بسیار مناسب هستند، به ازای هر شیء یک ردیف جدول نمایش می‌دهند و برای هر属性 شیء، یک داده جدول نمایش می‌دهند. لطفاً به مثال زیر مراجعه کنید.

مثال

مثال 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="عبارت</عنصر>

تمام عناصر HTML پشتیبانی می‌کنند.

پارامتر

پارامتر توضیح
عبارت

عبارتی که چگونگی تکرار مجموعه را مشخص می‌کند.

مثال‌های عبارت‌های قانونی:

x در records

(کلید، ارزش) در myObj

x در records track by $id(x)

دستورالعمل‌های مرجع AngularJS