Angular-JS ng-repeat 指令

Angular-JS ng-repeat 指令是一个方便的工具，可以将一组 HTML 代码重复多次或在项目集合中的每个项目重复一次。 ng-repeat 主要用于数组和对象。
ng-repeat 类似于我们在 C、C++ 或其他语言中的循环，但从技术上讲，它为我们正在访问的集合中的每个元素实例化一个模板（通常是一组 HTML 结构）。 Angular 维护一个 $index 变量作为当前正在访问的元素的键，用户也可以访问这个变量。

句法：


  {{keyName}}

这里的“MyObjectName”是一个可以是对象或数组的集合，您可以使用“keyName”访问其中的每个值。

示例 1

为应用程序创建一个 app.js 文件。
```
var app = angular.module('myApp',[]);
  
app.controller('MainCtrl', function($scope){
    $scope.names = ['Adam','Steve','George','James','Armin'];
    console.log($scope.names);
});
```
第 1 行 -创建了一个名为“myApp”的应用模块，没有依赖项。
第 3 行- 我们应用程序的主控制器。
第 4 行 -字符串“名称”数组。

创建 index.html 页面




     Angular ng-repeat
     
     
     


     Here is the name list
     
        
            {{name}}

第 5 行- 包括所有依赖项，如 jquery、angular-js 和 app.js 文件
第 12 行- 使用 ng-repeat 指令一次从名称数组中获取一个名称并显示它。

输出：

示例 2

app.js 文件

var app = angular.module('myApp',[]);
  
app.controller('MainCtrl', function($scope){
    $scope.strings= ['Geeks','For','Geeks'];
    console.log($scope.strings);
});

我们有一个包含三个字符串的列表。

索引.html




     Angular ng-repeat
     
     
     


     Here is the string list
     
        
应用：
 ng-repeat 可用于遍历数组，该数组需要的代码行数比通常的 javascript 方法少。
过滤器可以与 ng-repeat 一起使用来创建一个易于实现的搜索栏。
参考
https://angularjs.org/
 https://docs.angularjs.org/api/ng/directive/ngRepeat
 https://docs.angularjs.org/error/ngRepeat/dupes