AngularJS中Chosen插件无法读取ng-option元素的问题求助

看起来你遇到的核心问题是Chosen组件初始化时机和Angular数据异步加载不同步，加上没有正确使用Angular版本的Chosen集成方案，导致Chosen无法识别ng-options动态生成的选项。下面一步步帮你解决：

1. 清理冗余依赖库 #

你同时引入了chosen.jquery.min.js和chosen.proto.min.js，这两个是Chosen的不同实现版本，只需要保留一个即可。建议保留jQuery版本的，删除冗余的proto版本引入：

<!-- 移除这一行冗余依赖 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>

2. 正确引入Angular-Chosen的模块依赖 #

Angular-Chosen需要在你的模块中声明依赖才能生效，修改你的模块定义，添加localytics.directives（这是angular-chosen官方的模块名）：

angular.module('etWeb.RegistrationCard', [
  'nvd3',
  'base64',
  'localytics.directives' // 新增Angular-Chosen的模块依赖
])
.service('RegistrationCardService', RegistrationCardService)
.controller('RegistrationCardController', RegistrationCardController)
.filter('startsWithFirstName', function() {});

3. 替换原生jQuery初始化，使用Angular-Chosen指令 #

不要再用$(document).ready()手动初始化Chosen，而是直接在<select>标签上使用Angular-Chosen的指令，它会自动和Angular的数据绑定同步：

<div style="width:25em">
  <label> Hotel :</label>
  <!-- 添加chosen指令，配置相关参数 -->
  <select 
    chosen
    data-placeholder="Select a hotel..."
    ng-options="u.hotelName as u.hotelName for u in registrationCards | orderBy : 'hotelName' | unique:'hotelName'" 
    ng-model="selectedDist" 
    ng-change="selectAction(selectedDist)"
    style="width:100%"
  >
    <option value=""></option>
  </select>
</div>

这里调整了ng-options的写法，用u.hotelName as u.hotelName确保绑定的是酒店名称字符串（如果业务需要绑定整个对象，可改回u for u），同时添加data-placeholder优化Chosen的提示文本。

4. 解决unique过滤器缺失的问题 #

AngularJS原生并没有unique过滤器，如果你使用的是第三方库（比如angular-filter），需要确保已引入该库并添加模块依赖；如果是自定义过滤器，需要补充实现，比如：

angular.module('etWeb.RegistrationCard')
.filter('unique', function() {
  return function(items, filterOn) {
    if (filterOn === false) return items;
    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var newItems = [];
      var getKey = function(item) {
        return angular.isObject(item) ? item[filterOn] : item;
      };
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var key = getKey(item);
        if (newItems.map(getKey).indexOf(key) === -1) {
          newItems.push(item);
        }
      }
      items = newItems;
    }
    return items;
  };
});

5. 确保数据加载后触发视图同步 #

你的loadRegistrationCard是异步获取数据，Angular-Chosen会自动监听registrationCards的变化，但如果仍有问题，可以在数据赋值后手动触发$scope.$apply()（正常情况下Angular的then回调已在digest cycle中，无需额外操作）：

function loadRegistrationCard() {
  RegistrationCardService.fetchAllRegistrationCard().then(function(d) {
    $scope.registrationCards = d;
    // 若仍不生效，可尝试手动触发digest
    // if (!$scope.$$phase) $scope.$apply();
  }, function(errResponse) {
    console.error('Error while fetching Registration-Card');
  });
}

按照这些步骤调整后，Chosen组件应该就能正确识别ng-options生成的选项了。

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