AngularJS中如何用$index在双大括号内绑定多变量及语法合法性问询

一、如何在双大括号内用$index绑定多个变量的数据 #

通常我们会在ng-repeat指令中用到$index（它代表当前循环的索引值），要绑定多个变量的数据，核心思路是让这些变量的结构和循环索引对应上，比如用数组存储关联数据，再通过$index作为索引去访问不同数组的对应元素。

举个实际例子：
假设你的控制器里定义了三组关联的数据：

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.productNames = ['手机', '电脑', '平板'];
    $scope.productPrices = [3999, 8999, 2999];
    $scope.productStocks = [50, 20, 30];
  });

在模板的ng-repeat中，就可以通过$index同时获取这三个变量对应索引的值：

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="name in productNames">
    商品：{{name}}，价格：{{productPrices[$index]}}，库存：{{productStocks[$index]}}
  </div>
</div>

每次循环时，$index会同步对应三个数组的位置，就能把关联的多变量数据绑定到视图上。

如果数据是按对象数组组织的（更推荐这种结构清晰的方式），比如：

$scope.products = [
  {name: '手机', price: 3999, stock: 50},
  {name: '电脑', price: 8999, stock: 20},
  {name: '平板', price: 2999, stock: 30}
];

直接遍历对象就能访问多变量，若需要用到索引，也可以结合$index做逻辑处理：

<div ng-repeat="product in products">
  第{{$index + 1}}个商品：{{product.name}}，价格：{{product.price}}
</div>

二、能否采用{{appName($index)Data}}这种写法 #

很遗憾，这种写法是不生效的。AngularJS的表达式语法不支持直接通过这种拼接函数名+索引+后缀的方式访问变量。

如果想实现“根据索引获取对应命名变量”的需求，有几种替代方案：

1. 把数据组织成对象或数组（最推荐）：
   比如把相关数据放到数组或键名含索引的对象中：

   // 数组方式（直观易维护）
   $scope.appData = [
     {info: '数据1'},
     {info: '数据2'},
     {info: '数据3'}
   ];
   // 模板中直接调用
   {{appData[$index].info}}
   
   // 对象方式
   $scope.appNameData = {
     '0': '数据1',
     '1': '数据2',
     '2': '数据3'
   };
   // 模板中调用
   {{appNameData[$index]}}
   

2. 在控制器中定义函数，传入$index返回对应数据：
   如果你确实需要保留appName0Data、appName1Data这类命名的变量，可以写一个函数间接处理：

   $scope.getAppData = function(index) {
     return $scope['appName' + index + 'Data'];
   };
   // 模板中调用函数
   {{getAppData($index)}}
   

   这样就能实现根据索引获取对应命名变量的效果了。

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