AngularJS ng-repeat Düzenleyicisi

AngularJS Referans El Kitabı

Tanım ve Kullanım

ng-repeat Düzenleyici, belirtilen sayıda HTML'yi tekrarlar.

HTML koleksiyonundaki her bir öğe bir kez tekrarlanır.

Koleksiyonun dizisi veya nesne olması gerekir.

Dikkat:Her tekrarlanan örneğin kendi etkisi alanı vardır ve bu alan mevcut öğe tarafından oluşturulur.

Bir nesne koleksiyonunuz varsa:ng-repeat Düzenleyici, HTML tabloları oluşturmak için oldukça uygun bir komuttur, her nesne için bir tablo satırı gösterir ve her nesne özelliği için bir tablo verisi gösterir. Aşağıdaki örneği inceleyin.

Örnek

Örnek 1

records dizisindeki her bir öğe için bir başlık yazın:

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

Kişisel olarak deneyin

Örnek 2

records dizisindeki her bir öğe için bir tablo satırı yazın:

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

Kişisel olarak deneyin

Örnek 3

Her objenin her özelliği için bir tablo satırı yazın:

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

Kişisel olarak deneyin

Sözdizimi

<element ng-repeat="ifade</element>

Tüm HTML elemanları destekler.

Parametre

Parametre Açıklama
ifade

Koleksiyonu dolaşma nasıl belirleneceğini belirleyen ifade.

Geçerli ifade örnekleri:

x in records

(key, value) in myObj

x in records track by $id(x)

AngularJS Referans El Kitabı