AngularJS：当ng-options属性与ng-repeat一起使用时，bootstrap-select未正确显示

Question

我正在使用bootstrap-select（https://github.com/silviomoreto/bootstrap-select）来显示选择元素。由于某些原因，当我使用ng-options和ng-repeat时，它没有正确显示。

这是我的代码：

<ul>
    <li ng-repeat="category in categories">
        <select class="select" ng-model="status" ng-options="obj.Id as obj.Name for obj in statuses"></select>
     </li>
</ul>

这就是我所拥有的

请注意＆lt; div /＆gt;不会在选择控件下方添加。

有人试图解决这个问题吗？我可以以某种方式重新初始化我的选择元素吗？请指教。谢谢。

更新 以下是相同的选择在放置在ng-repeat之外时的外观。：

您可以看到select元素实际上不可见（黄色框），而是＆lt; div /＆gt;在select元素下面呈现，这正是用户在页面上看到的内容。这就是我提到的意思＆lt; div /＆gt;在我最初的问题中。

Answer 1

这是因为点击.dropdown-toggle时的事件监听器不存在。它是bootstrap javascript包的一部分，所以，你必须找到一个解决方法。

angular.module('MyModule', []).directive('selectpicker', function () {
    return {
        restrict: 'CA',
        link: function (scope, elem) {
            angular.element(elem).selectpicker();
            angular.element('button.dropdown-toggle').on('click', function () {
                console.log('clicked')
            });
        }
    };
});

Answer 2

抱歉迟到了。我希望你找到你的答案:) 我不知道它是否是完美的角度方式答案，但它对我有用

首先我创建了一个指令并为页面加载

创建一个监听器

angular.module("selectBox", []).directive('selectBox', function() {
 return {
  restrict: 'E',
  link: function() {
   return $(window).bind("load", function() {
    //this will make all your select elements use bootstrap-select
    return $('select').selectpicker();
   });
  }
 };
}); 

并在您的模板中添加

<select-box></select-box>

希望这会有所帮助:)