AngularJS ng-repeat 指令

实例

为记录数组中的每个项写入一个标题:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<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 snabbkp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});
</script>
</body>
</html>

运行一下

定义与用法

ng-repeat 指令根据给定的次数来重复 HTML。

集合中的每个项目都会重复一次 HTML。

集合必须是数组或对象。

注意：重复的每个实例都有自己的作用域，包括当前项。

如果您有一个对象集合，ng-repeat 指令非常适合创建一个HTML表，为每个对象显示一个表行，为每个对象属性显示一个表数据。见下面的例子。

语法

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

由所有 HTML 元素支持。

参数值

值	描述
expression	指定如何循环集合的表达式有效表达式实例: `x in records` `(key, value) in myObj x in records track by $id(x)`

更多实例

实例

为记录数组中的每个项写一行表:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<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 snabbkp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ]
});
</script>
</body>
</html>

运行一下

实例

为对象中的每个属性编写一个表行:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="myApp">
<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>
</body>
</html>

运行一下

AngularJS ng-repeat 指令

实例

定义与用法

语法

参数值

更多实例

实例

实例

分类导航