AngularJS-jquery插件SelectBoxIt在ng个选项完成填充select之后

AngularJS - jquery plugin SelectBoxIt after ng-options finish populating select

本文关键字：填充 select 之后 选项 插件 SelectBoxIt ng AngularJS-jquery      更新时间：2023-09-26

我正在使用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选择框，但在angular使用ng选项填充下拉列表之前仍在执行。。。。

.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，如果在填充选择框后有一些事件可以收听，那么您可以调用SelectBoxItrefresh（）方法来更新下拉列表，如下所示：

    // Once your original select box is populated
    $('select').selectBoxIt('refresh');
一种方法是观察模型，然后在下一个摘要周期中触发事件。 
scope.$watch(model, function() {
    scope.$evalAsync(function() {
        // event
    });
});

我在这里写得很好：当ng选项完成渲染时检测。

我已经解决了这里的部分问题，在指令中使用$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);
};

})；

相关文章：