AngularJS NG-Repeat示例
时间：2020-02-23 14:29:36 来源:igfitidea点击:
ng-Repeat是一个AngularJS指令，其通常用于在表中显示数据。
它是广泛使用的指令。
它与每个循环的Java非常相似。
语法：
<table>
<tr ng-repeat="con in countries">
<td>{{ con.name }}</td>
<td>{{ con.capital }}</td>
</tr>
</table>
这里的countries是App.js中定义的JSON数组。
示例说明
复制以下文本，打开记事本，粘贴并将其保存为Angularjsexample.html并在浏览器中打开它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Captial</th>
</tr>
</thead>
<tr ng-repeat="con in countries">
<td>{{ con.name }}</td>
<td>{{ con.capital }}</td>
</tr>
</table>
</br>
</div>
</body>
</html>
app.js.
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.countries=
[
{"name": "San Franceco" , "capital" : "delhi"},
{"name": "England" , "capital" : "London"},
{"name": "France" , "capital" : "Paris"},
{"name": "Japan" , "capital" : "Tokyo"}
];
});
其他一些属性：
本地范围可以访问一些属性，我们可以直接在NG重复中使用。
| Variable | Type | Description |
|---|---|---|
| $index | number | It carries index of repeated element |
| $first | boolean | true if repeated element is first element |
| $middle | boolean | true if repeated element is middle element |
| $last | boolean | true if repeated element is last element |
| $even | boolean | It depends on $index.true if $index is even |
| $odd | boolean | It depends on $index.true if $index is odd |
让我们使用偶数和$奇数更改奇数和偶数行的颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="theitroadContoller">
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Captial</th>
</tr>
</thead>
<tr ng-repeat="con in countries">
<td ng-if="$odd" style="background-color:#f1f1f1"> {{ con.name }}</td>
<td ng-if="$even" style="background-color:#f1aaaa"> {{ con.name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ con.capital }}</td>
<td ng-if="$even" style="background-color:#f1aaaa">{{ con.capital }}</td>
</tr>
</table>
</br>
</div>
</body>
</html>
app.js.
var app = angular.module('myApp', []);
app.controller('theitroadContoller', function($scope) {
$scope.countries=
[
{"name": "San Franceco" , "capital" : "delhi"},
{"name": "England" , "capital" : "London"},
{"name": "France" , "capital" : "Paris"},
{"name": "Japan" , "capital" : "Tokyo"}
];
});
我们使用$eve检查偶数行和$dd以检查奇数行。
ng-if是另一种角度指令，用于检查是否条件。
