[英]AngularJS - jquery plugin SelectBoxIt after ng-options finish populating select
我正在使用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插件渲染这个SELECT框。
SELECT的硬编码版本工作正常,因为我在控制器底部的SelectBoxIt初始化处理页面的这一部分:
$targetSelects.selectBoxIt({
theme: "bootstrap"
, downArrowIcon: "arrow"
, showFirstOption: false
});
$targetSelects.on({
"open" : onOpen
, "close" : onClose
});
我现在认为SelectBoxIt初始化发生在角度填充的SELECT框完成填充之前。
这看起来有可能吗? 如果是这样,我该如何解决这个问题呢? 我认为这可能是使用Deferred对象的情况,但我不知道在哪里注入它。
任何帮助,将不胜感激。
我重新实现了插件调用作为指令。 它确实有效。 它启动下拉菜单作为SelectBoxIt选择框,但它仍然在角度已使用ng-options填充下拉列表之前完成....
.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');
}
};
});
如果您没有使用Angular.js,可以使用populate选项向SelectBoxIt下拉列表中添加选项: http ://gregfranko.com/jquery.selectBoxIt.js/#PopulateOptions
由于您使用的是Angular,如果在填充选择框后有一些事件可以收听,那么您可以调用SelectBoxIt refresh()方法来更新您的下拉列表,如下所示:
// Once your original select box is populated
$('select').selectBoxIt('refresh');
一种方法是观察模型,然后在下一个摘要周期中触发事件。
scope.$watch(model, function() {
scope.$evalAsync(function() {
// event
});
});
我在这里正确地写了这个: 检测ng-options何时完成渲染 。
我在这里解决了部分问题,这可能对某些人有用,在指令中使用$ 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);
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.