Angular动态列表名在ui-select的ng-repeat中使用报错求解决方案

这个问题我之前也碰到过，核心是AngularJS在指令属性里解析表达式的规则导致的——直接用{{}}插值会触发语法错误，因为像ui-select-choices这类指令的repeat属性期望的是一个可解析的Angular表达式，而非插值后的字符串。咱们可以通过以下方法实现动态列表名的调用：

1. 重构数据存储结构 #

首先在控制器里，把所有动态生成的年份列表统一存到一个对象中，用选中行的id/uuid/索引作为对象的键（key），对应的年份数组作为值（value）。这样就能通过键名直接访问对应的列表，避免插值语法的冲突。

示例控制器代码：

// 初始化存储动态年份列表的容器对象
$scope.dynamicYearLists = {};

// 假设这是你处理ng-table选中行的方法，生成对应年份列表
$scope.handleTableRowSelect = function(selectedRow) {
  // 根据选中行的id生成动态年份列表（替换成你的实际生成逻辑）
  const baseYear = new Date().getFullYear();
  $scope.dynamicYearLists[selectedRow.id] = [
    baseYear - 2,
    baseYear - 1,
    baseYear,
    baseYear + 1,
    baseYear + 2
  ];
};

2. 在ng-repeat中直接通过对象属性访问动态列表 #

在ng-repeat的ui-select组件里，直接通过dynamicYearLists[当前项的id]来绑定数据源，这是AngularJS可以正确解析的表达式，不会触发语法错误。

示例HTML代码：

<!-- 假设someList是你ng-repeat遍历的列表 -->
<div ng-repeat="item in someList">
  <ui-select ng-model="item.selectedYear" theme="bootstrap">
    <ui-select-match placeholder="请选择年份">{{$select.selected}}</ui-select-match>
    <!-- 直接通过对象属性访问动态列表，track by用于优化渲染 -->
    <ui-select-choices repeat="year in dynamicYearLists[item.id] track by year">
      <div ng-bind="year"></div>
    </ui-select-choices>
  </ui-select>
</div>

补充说明 #

如果你的动态列表是基于ng-table选中行的索引而非id，逻辑完全一致，只需要把对象的键换成索引值即可，比如$scope.dynamicYearLists[selectedRowIndex] = [...]，在ng-repeat里对应写成dynamicYearLists[item.index]。

这种方法的核心是利用JavaScript对象的属性访问特性，把动态列表名转化为对象的键，规避了AngularJS指令属性中不能嵌套插值语法的限制，同时也让代码结构更清晰易维护。

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