AngularJS 1.5中动态修改ng-repeat对象名的实现方案

你已经在指令标签里通过data-model-name区分了两个下拉对应的数据集（learnertype和learner），现在只需要让指令根据这个属性动态绑定对应的数据源即可，具体修改步骤如下：

1. 让指令接收模型名称参数 #

首先更新指令的scope配置，添加一个属性来接收data-model-name的值，确保每个下拉实例能拿到自己对应的数据集名称：

app.directive('dropdownList', ['$filter', function($filter){
 return {
  restrict: 'E',
  templateUrl: 'js/controllers/get-drop-down-list.html',
  transclude: true,
  scope: {
   main_label: '@',
   modelName: '@modelName' // 绑定data-model-name属性
  },
  // 其余代码保留
 }
});

2. 动态获取对应数据集 #

利用你已经注入的$parse服务，从父作用域中解析出指定模型名称的数据，并赋值给指令内部的变量。修改指令的controller部分：

controller: function($rootScope, $scope, $http, $attrs, $parse) {
  // 解析modelName对应的父作用域变量
  const modelGetter = $parse($attrs.modelName);
  
  // 初始加载对应数据集
  $scope.currentRecords = modelGetter($scope.$parent);
  
  // 监听数据变化（如果数据集是异步加载的，这一步能保证数据更新时列表同步刷新）
  $scope.$watch(
    () => modelGetter($scope.$parent),
    (newData) => {
      $scope.currentRecords = newData;
    }
  );
}

如果你的数据集是存放在$rootScope中的，把$scope.$parent替换成$rootScope即可。

3. 修改模板的遍历对象 #

把指令模板里固定的list_all_records换成我们刚定义的currentRecords，这样每个下拉就会遍历自己对应的数据集：

<div>
 <li ng-repeat="record in currentRecords" class="selection-list perf-elem" data-item-id="<%record.id%>" ng-if="search_key == undefined || search_key == '' || record.search_word.toLowerCase().indexOf(search_key) != -1">
   <!-- 保留你原来的列表项内容 -->
 </li>
</div>

最后清理冗余代码 #

记得删掉link函数里没用的scope.list_all_records = attrs.arrayName;这一行，现在我们已经不再依赖这个变量了。

完成这些修改后，第一个下拉会绑定learnertype数据集，第二个下拉会绑定learner数据集，就能实现不同下拉加载对应数据的需求了。

内容的提问来源于stack exchange，提问作者Kalyan Sahai Sharma