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>