Angularjs：在 ng-repeat 中获取索引-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJs 的 ng-repeat 中获取索引是一个常见的需求。在某些场景下，我们需要知道每个数组元素的索引以及它的值。本文将介绍如何在 ng-repeat 中获取每个数组元素的索引，并提供示例代码。

ng-repeat 简介

ng-repeat 是 AngularJs 提供的一个指令，用于将一个数组中的元素循环渲染到页面中。它的格式如下：

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

其中，items 是一个数组，item 是数组中的一个元素。ng-repeat 会将 items 数组中的每个元素都渲染为一个 div 标签，并将 item 绑定到标签中。

获取在 ng-repeat 中获取每个元素的索引

在 ng-repeat 中获取每个元素的索引可以通过 $index 变量实现。$index 是 AngularJs 内置的一个变量，用于表示当前元素在数组中的索引位置。示例代码如下：

<div ng-repeat="item in items">
  <div>索引：{{$index}}</div>
  <div>内容：{{item}}</div>
</div>

在上述代码中，$index 表示当前元素在数组中的索引位置。同时，item 表示当前元素的值。

示例代码

以下是一个完整的示例代码，其中展示了如何在 ng-repeat 中获取每个元素的索引：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>AngularJs Demo</title>
  <meta charset="utf-8" />
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
</head>

<body ng-controller="myCtrl">
  <div ng-repeat="item in items">
    <div>索引：{{$index}}</div>
    <div>内容：{{item}}</div>
  </div>

  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.items = ["AngularJs", "React", "Vue"];
    });
  </script>
</body>

</html>

在上述代码中，我们创建了一个包含三个元素的数组，并使用 ng-repeat 将它们渲染到页面中。同时，我们通过 $index 变量获取每个元素的索引，将其展示在页面上。

总结

在 ng-repeat 中获取每个元素的索引对于一些场景非常重要。本文介绍了如何使用 $index 变量获取每个元素的索引，并提供了示例代码。如果您正在学习 AngularJs，那么掌握在 ng-repeat 中获取元素索引的方法将对您的工作或学习带来帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a65f17d4982a6ebcbcf31