AngularJS ng-repeat 指令

定义和用法

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)

示例

下例演示了 ng-repeat 遍历了数组并填充到表格元素中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<style>
   .striped {
      color:white;
      background-color:#f0f;
   }
</style>
</head>
<body ng-app="myApp">
      <table ng-controller="myCtrl">
      <tr ng-repeat="x in records" ng-class-even="'striped'">
         <td>{{x.Name}}</td>
         <td>{{x.Country}}</td>  
      </tr>
      </table>
      <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function($scope) {
         $scope.records = [
            {
            "Name" : "小明明",
            "Country" : "北京"
            },
            {
            "Name" : "Berglunds",
            "Country" : "巴黎"
            },
            {
            "Name" : "小猫",
            "Country" : "成都"
            },
            {
            "Name" : "Handel",
            "Country" : "西班牙"
            }
         ]
      });
      </script>
</body>
</html>

尝试一下

AngularJS ng-repeat 指令

定义和用法

语法

参数

示例

相关页面