AngularJS中gridOptions数组变量索引取值无数据问题咨询

这个问题本质是AngularJS模板表达式的作用域上下文限制导致的，我来给你一步步拆解清楚：

为什么{{gridOptions4[0].no}}能正常输出？ #

AngularJS的双大括号{{}}表达式，是在**当前组件/控制器对应的作用域（$scope）**里执行的。你写的gridOptions4[0].no里，0是数字字面量，而gridOptions4应该已经被你定义在当前作用域中了（比如在控制器里挂到了$scope.gridOptions4上），所以Angular能正确找到这个数组，取出索引0对应的no值，自然输出1。

为什么var i=0; {{gridOptions4[i].no}}没数据？ #

这里有两个核心问题：

1. 变量作用域不互通：如果你是把var i=0;写在模板的<script>标签里，这个i是全局变量（或者脚本块的局部变量），但AngularJS的模板表达式默认只会查找当前作用域内的变量，不会自动识别全局变量。所以当表达式里用到i时，Angular在自己的作用域里找不到这个变量，就会返回undefined，自然拿不到gridOptions4[i].no的值。
2. 模板语法不合法：如果你是直接在模板里写var i=0; {{gridOptions4[i].no}}（比如直接写在HTML标签内容里），这本身就不符合Angular的模板规则——双大括号外的var i=0;只是普通文本，不会被当作JS代码执行，而表达式里的i依然是未定义的，所以同样输出空。

正确的写法应该是怎样的？ #

方法1：在控制器里把变量挂载到作用域 #

这是最规范的做法，把需要在模板里用到的变量都放到Angular的作用域中：

// 假设这是你的控制器代码
app.controller('YourGridController', function($scope) {
  // 你的gridOptions4数据
  $scope.gridOptions4 = [{ no: 1 }, { no: 2 }, { no: 3 }];
  // 把索引变量i挂载到作用域
  $scope.i = 0;
});

然后在模板里直接用：

{{gridOptions4[i].no}}

这样Angular就能在作用域里找到i，正确求值输出1。

方法2：临时场景用ng-init（不推荐复杂场景） #

如果只是临时需要一个索引变量，也可以用ng-init在模板里初始化（但官方不推荐用ng-init定义业务变量，适合简单演示）：

<div ng-init="i=0">
  {{gridOptions4[i].no}}
</div>

内容的提问来源于stack exchange，提问作者鞝勳頊�,angularjs"