AngularJS -ng- SelectBoxIt完成select填充后的jquery插件选项
我使用下面的代码使用AngularJS填充一个选择框：
<select ng-model="department"
ng-options="dept as dept.name for dept in departmentList"
class="fancy">
<option value="">-- select an option --</option>
</select>但是我需要使用SelectBoxIt jquery插件来呈现这个选择框。
选择的硬编码版本工作得很好，因为我在处理页面这一部分的控制器底部有SelectBoxIt的初始化：
$targetSelects.selectBoxIt({
theme: "bootstrap"
, downArrowIcon: "arrow"
, showFirstOption: false
});
$targetSelects.on({
"open" : onOpen
, "close" : onClose
});我现在认为SelectBoxIt初始化是在角度填充的选择框完成填充之前发生的。
这看起来可能吗？如果是这样，我该如何解决这个问题呢？我认为这可能是使用延迟对象的情况，但不确定将其注入到何处。
任何帮助都将不胜感激。
更新
我将插件调用重新实现为指令。它确实有效。它将下拉框初始化为一个选项选择框，但在angular使用ng- SelectBoxIt填充下拉框之前仍在执行此操作。
.directive('fancySelect', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var $targetSelects = $(element),
selectConfig = {
theme: "bootstrap",
downArrowIcon: "arrow",
showFirstOption: false
};
function onOpen(event){
$(this).data("selectBox-selectBoxIt").downArrow.addClass("drop-up");
log('onOpen');
}
function onClose(event){
$(this).data("selectBox-selectBoxIt").downArrow.removeClass("drop-up");
log('onClose');
}
$targetSelects.selectBoxIt(selectConfig);
$targetSelects.on({
"open" : onOpen,
"close" : onClose
});
$targetSelects.selectBoxIt('refresh');
}
};
});回答 3
Stack Overflow用户
发布于 2013-11-22 05:01:09
如果您没有使用Angular.js，那么可以使用填充选项将选项添加到SelectBoxIt下拉列表中：http://gregfranko.com/jquery.selectBoxIt.js/#PopulateOptions
由于您使用的是Angular，因此在填充选择框后，如果您可以监听某些事件，则可以调用SelectBoxIt refresh()方法来更新dropdown，如下所示：
// Once your original select box is populated
$('select').selectBoxIt('refresh');Stack Overflow用户
发布于 2013-12-10 20:54:34
一种方法是观察模型，然后在下一个摘要周期中触发一个事件。
scope.$watch(model, function() {
scope.$evalAsync(function() {
// event
});
});我已经在这里正确地写下了：Detect when ng-options has finished rendering。
Stack Overflow用户
发布于 2014-12-05 17:25:41
我已经解决了这里的部分问题，在指令中使用$timeout，这可能会对某些人起作用。虽然对我来说，这解决了选项呈现的问题，但不幸的是，在写这篇文章的时候，我无法让它们发挥作用！
.directive('fancySelect', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function() {
var $targetSelects = $(element),
selectConfig = {
theme: "bootstrap",
downArrowIcon: "arrow",
showFirstOption: false
};
function onOpen(event){
$(this).data("selectBox-selectBoxIt").downArrow.addClass("drop-up");
log('onOpen');
}
function onClose(event){
$(this).data("selectBox-selectBoxIt").downArrow.removeClass("drop-up");
log('onClose');
}
$targetSelects.selectBoxIt(selectConfig);
$targetSelects.on({
"open" : onOpen,
"close" : onClose
});
$targetSelects.selectBoxIt('refresh');
}
}, 0);
};})；
https://stackoverflow.com/questions/20127635
复制相似问题
腾讯云开发者
