如何使用ng-repeat显示数组/对象？AngularJS数组遍历及索引过滤问题

嘿，我来帮你搞定这个问题！咱们先一步步排查页面没内容的常见坑，再实现从索引1开始遍历的需求～

一、先排查页面无内容的核心原因 #

页面没显示内容，大概率是这些细节没做好：

• 有没有正确引入AngularJS脚本？比如没加CDN或者本地路径写错了；
• 页面根元素（比如<html>或<body>）有没有加ng-app指令，指定你定义的模块名？
• 要展示内容的容器元素，有没有加ng-controller绑定对应的控制器？
• 你的数组有没有挂载到控制器的$scope（或者用controllerAs语法时挂载到this）上？视图可没法直接访问控制器里的私有变量哦。

二、完整解决方案（两种实现方式） #

下面给你两种可行的方案，你可以根据自己的需求选：

方法1：视图层直接过滤（用$index跳过0索引） #

这种方式不用修改原数组，直接在ng-repeat里加判断过滤掉第一个元素：

AngularJS 控制器代码

// 定义模块和控制器
angular.module('myApp', [])
  .controller('MyController', function($scope) {
    // 这里替换成你自己的数组
    $scope.myArray = ['要跳过的0索引元素', '苹果', '香蕉', '橙子', '葡萄'];
  });

HTML 代码

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <!-- 引入AngularJS，这里用官方CDN，也可以用本地文件 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
  <h3>从索引1开始的数组元素</h3>
  <ul>
    <!-- 用ng-if="$index > 0"跳过0索引，同时显示原索引和对应值 -->
    <li ng-repeat="item in myArray" ng-if="$index > 0">
      原索引: {{$index}} | 值: {{item}}
    </li>
  </ul>
</body>
</html>

说明：$index是ng-repeat自带的内置变量，代表当前元素的索引（从0开始），所以ng-if="$index > 0"就能精准跳过第一个元素。如果想要计数从1开始（而非显示原索引），直接用{{$index}}就刚好——跳过0后第一个元素的$index就是1，正好对应序号1。

方法2：控制器层预处理数组（更适合复杂场景） #

如果不想在视图层加过滤逻辑，可以在控制器里直接截取数组从索引1开始的部分：

AngularJS 控制器代码

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    // 原数组
    $scope.originalArray = ['要跳过的0索引元素', '苹果', '香蕉', '橙子', '葡萄'];
    // 用slice(1)截取从索引1到末尾的所有元素，生成新数组用于展示
    $scope.displayArray = $scope.originalArray.slice(1);
  });

HTML 代码

<ul>
  <!-- 直接遍历预处理后的数组，计数从1开始的话用$index +1 -->
  <li ng-repeat="item in displayArray">
    计数: {{$index + 1}} | 值: {{item}}
  </li>
</ul>

这种方式的好处是视图逻辑更简洁，适合原数组后续还要保留完整数据的场景。

三、验证要点 #

写完代码后，你可以检查这些点：

1. 打开浏览器控制台，看看有没有Angular相关的报错（比如模块未定义、控制器未找到）；
2. 确认数组确实有数据，不是空数组或者未定义；
3. 确认ng-app和ng-controller的名称和你代码里定义的完全一致（大小写敏感哦）。

内容的提问来源于stack exchange，提问作者JamesDeveloper