AngularJS ng-repeat tagubilin

Manwal ng Tagapagbalita ng AngularJS

Pagsasakop at Paggamit

ng-repeat Ang tagubilin ay magsisimula ng grupo ng HTML sa ilang beses.

Ang bawat bagay sa HTML koleksyon ay magsisimula ulit.

Ang koleksyon ay dapat ay array o bagay.

Pansin:Ang bawat pinagpalitang halimbawa ay makakakuha ng sariling sakop, na binubuo ng kasalukuyang bagay.

Kung mayroon kang koleksyon ng mga bagay:ng-repeat Ang tagubilin ay napakatugma sa paggawa ng talahanayan ng HTML, para ipakita ang bawat bagay bilang isang linya ng talahanayan at ang bawat katangian ng bagay. Tingnan ang mga halimbawa sa ibaba.

Mga halimbawa

Halimbawa 1

Makapagpalagay ng isang pamagat para sa bawat bagay sa array na 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>

Subukan Lang!

Halimbawa 2

Makapagpalagay ng isang linya ng talahanayan para sa bawat bagay sa array na 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>

Subukan Lang!

Halimbawa 3

Makapagpalagay ng isang linya ng talahanayan para sa bawat katangian ng bagay:

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

Subukan Lang!

Gramatika

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

Lahat ng elemento ng HTML ay sumusuporta.

Parameter

Parameter Paglalarawan
expression

Ekspresyon na tinukoy kung paano ilikha ang paglikha ng collection.

Halimbawa ng Legal na Ekspresyon:

x sa records

(key, value) sa myObj

x sa records track by $id(x)

Manwal ng Tagapagbalita ng AngularJS