代码之家 › 专栏 › 技术社区 › user4143172

以编程方式关闭所有ui选择下拉列表?

angular-ui-select bootstrap-modal angular-ui-bootstrap angularjs

user4143172 · 技术社区 · 8 年前

有人知道如何关闭所有 ui-select a中的列表 $uibModal ?

杰斯宾 https://jsbin.com/lopitopiwa/edit?html,js,output

angular.module('myApp').directive('uibModalDragging',[
    UibModalDragging
]);


function UibModalDragging() {
    return {
        restrict: 'A',
        scope: false,

        link: function (scope, iElem, iAttrs) {
            $(iElem).closest('.modal-content').draggable({
                handler: '.panel-heading',
                start: onStart
            })
        }
    };

    function onStart() {
        //*********************************************
        //close all ui-select ???
    }
}

1 回复 | 直到 8 年前

pegla 8 年前

这是更好的方法,但您需要根据以下内容创建另一个指令:

https://github.com/angular-ui/ui-select/wiki/Accessing- $选择

angular.module('myApp').directive('myUiSelect', function() {
  return {
    require: 'uiSelect',
    link: function(scope, element, attrs, $select) {
      scope.$on('closeAll', (ev,val)=>{
        $select.close();
      });
    }
  };
});

然后将其添加到元素中:

<ui-select my-ui-select ng-model="selected.value">
                    <ui-select-match>
                        <span ng-bind="$select.selected.name"></span>
                    </ui-select-match>
                    <ui-select-choices repeat="item in myModalCtrl.itemArray">
                        <span ng-bind="item.name"></span>
                    </ui-select-choices>
              </ui-select>

在此之后,只需广播事件以关闭此处的所有示例:

https://jsbin.com/cadekafata/1/edit?html,js,console,output

推荐文章

Clebo Sevic · React:从回调访问State内部的数组时未定义

1 年前

balzored · 背景下的画布外引导

2 年前

brok lothbrok · 如何在身份剃刀页面中使用模态引导。net core

2 年前

Irfan Chaniago · 使用模式文件上传表单更新

2 年前

Volkan · 刺激中的Rails 7和Bootstrap错误-无法解析模块说明符Bootstrap

2 年前

timmyblaze · Bootstrap 5模式,带后台交互

2 年前

Identic 7 · 在PHP MVC中使用引导模式编辑数据

2 年前

user21885339 · Modal无法在Vue/Firebase应用程序中工作,因为未定义“$”

3 年前