AngularJS：引导选不能正常显示NG-选项时属性用于NG-重复 [英] AngularJS: bootstrap-select is not shown properly when ng-options attribute is used with ng-repeat

问题描述

我使用的引导选择（ https://github.com/silviomoreto/bootstrap-select）显示选择的元素。因为当我NG-选项和NG-重复使用它的原因，它没有正常显示。

I am using bootstrap-select (https://github.com/silviomoreto/bootstrap-select) to show select elements. For some reasons when I use it with ng-options and ng-repeat, it is not shown properly.

下面是我的code：

<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>

这是我有什么

This is what I have

请注意，＆LT; D​​IV />只需选择下面的控制没有加入

Please note that <div/> is not added just below the select control.

是否有人试图解决这一问题？我可以采用某种重新初始化我选择元素？请建议。谢谢你。

Did someone try to solve the issue? Can I re-initialize my select elements somehow? Please advise. Thank you.

更新：
下面是当它被放置NG重复外的同一选择的外观：

UPDATE: Here is how the same select looks when it is placed outside of ng-repeat.:

您可以看到，选择元素实际上是不可见的（黄色框），代替＆LT; D​​IV />只是选择元素下呈现的，这正是用户在页面上看到的。这是提到＆LT时，我的意思。我最初的问题DIV />

You can see that the select element is actually not visible (yellow box), instead <div/> is rendered just below the select element and this is exactly what a user see on the page. This is what I meant when mentioned <div /> in my initial question.

推荐答案

这是因为的点击.dropdown拨动事件听者并不present。这是自举的JavaScript包的一部分，所以，你必须找出一个解决办法。

This is because the event listner on click of .dropdown-toggle is not present. It is part of the bootstrap javascript package, so, you have to find out a workaround.

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')
            });
        }
    };
});

这篇关于AngularJS：引导选不能正常显示NG-选项时属性用于NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！