Angular ng-repeat 与 data-ng-repeat [重复]

Angular中的ng-repeat和data-ng-repeat是两个用于循环渲染HTML元素的指令。它们的作用类似，都是用于在页面上重复显示相同的HTML代码块，但是在命名上稍有差异。本文将介绍这两个指令的用法，并通过一个案例代码来演示它们的工作原理。

ng-repeat指令的用法

ng-repeat是Angular中最常用的指令之一，它可以根据一个数据集合来重复显示HTML元素。具体用法如下：

<div ng-repeat="item in itemList">
    {{ item }}
</div>

在上面的例子中，ng-repeat指令会遍历itemList数组中的每一个元素，并将当前元素的值赋给item变量，然后在div元素中显示出来。这样就会根据itemList数组的长度重复生成多个div元素。

data-ng-repeat指令的用法

data-ng-repeat是ng-repeat的另一种写法，它与ng-repeat的功能完全相同，只是在命名上稍有不同。使用data-ng-repeat指令的方式如下：

<div data-ng-repeat="item in itemList">
    {{ item }}
</div>

与ng-repeat指令相比，data-ng-repeat指令只是将ng-前缀替换为data-前缀，其他用法完全一样。

案例代码演示

下面我们通过一个案例代码来演示ng-repeat和data-ng-repeat的用法。假设我们有一个名为students的数组，其中包含了多个学生的姓名。我们希望在页面上循环显示每个学生的姓名。代码如下：

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="student in students">
        {{ student }}
    </div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.students = ['张三', '李四', '王五'];
    });
</script>

在上面的代码中，我们首先创建了一个Angular应用，并定义了一个名为myApp的模块。然后，我们在myApp模块中创建了一个名为myCtrl的控制器，其中定义了一个名为students的数组，用于存储学生的姓名。最后，我们在页面上使用ng-repeat指令来循环遍历students数组，并将每个学生的姓名显示在一个div元素中。

通过ng-repeat和data-ng-repeat指令，我们可以方便地在Angular应用中实现循环渲染HTML元素的功能。无论是使用ng-repeat还是data-ng-repeat，它们的用法都非常类似，只是在命名上稍有不同。通过一个简单的案例代码，我们可以清楚地了解到它们的工作原理和用法。希望本文对于初学者能够有所帮助。