Οδηγία AngularJS ng-repeat

Εκπαιδευτικός Οδηγός 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