twitter-bootstrap AngularJS：当 ng-options 属性与 ng-repeat 一起使用时，bootstrap-select 未正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15563314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: bootstrap-select is not shown properly when ng-options attribute is used with ng-repeat
提问by Antipod
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.
我正在使用 bootstrap-select ( https://github.com/silviomoreto/bootstrap-select) 来显示选择元素。由于某些原因，当我将它与 ng-options 和 ng-repeat 一起使用时，它没有正确显示。
Here is my 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
这就是我所拥有的
Please note that <div/> is not added just below the select control.
请注意 <div/> 并没有添加到选择控件的正下方。
Did someone try to solve the issue? Can I re-initialize my select elements somehow? Please advise. Thank you.
有人试图解决这个问题吗？我可以以某种方式重新初始化我的选择元素吗？请指教。谢谢你。
UPDATE:Here is how the same select looks when it is placed outside of ng-repeat.:
更新：这是将相同的 select 放置在 ng-repeat 之外时的外观：
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.
您可以看到 select 元素实际上是不可见的（黄色框），而是 <div/> 呈现在 select 元素的正下方，这正是用户在页面上看到的内容。这就是我在最初的问题中提到 <div /> 时的意思。
回答by Jo?o
This is because the event listner on click of .dropdown-toggleis not present. It is part of the bootstrap javascript package, so, you have to find out a workaround.
这是因为点击的事件监听.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')
});
}
};
});
回答by Mohamed Abd El Rahman
sorry for late answer. i hope u found your answer :) i don't know if it's the perfect angular way answer but it worked for me
抱歉回复晚了。我希望你找到了你的答案 :) 我不知道这是否是完美的角度方式答案，但它对我有用
first i created a directive and create a listener for page finish loading
首先，我创建了一个指令并创建了一个用于页面完成加载的侦听器
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();
});
}
};
});
and in your template just add
并在您的模板中添加
<select-box></select-box>
hope that would help :)
希望这会有所帮助:)
