AngularJS:引导选不能正常显示NG-选项时属性用于NG-重复正常显示、选项、属性、AngularJS

2023-09-13 03:29:16 作者:我们都输给了距离、

我使用的引导选择( 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')
            });
        }
    };
});