2

我正在使用 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>

这就是我所拥有的 在此处输入图像描述

请注意，<div/> 没有添加到选择控件的正下方。

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

更新： 这是将相同的选择放在 ng-repeat 之外时的外观。：

在此处输入图像描述

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

4

2 回答 2

2

这是因为单击的事件侦听.dropdown-toggle器不存在。它是引导 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')
            });
        }
    };
});
于 2013-08-11T01:16:10.747 回答
1

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

首先我创建了一个指令并为页面完成加载创建了一个监听器

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>

希望这会有所帮助:)

于 2013-06-05T14:09:17.933 回答