angular组件(ngKeybordSelect)－经由过程键盘完成多选

2019年8月31日 170次阅读 来源: 第三方x

在方才完毕的angular交易体系项目中有几个需求是让我以为要花点时刻的

  • 怎样更文雅的运用angular-bootstrap 的 Modal框。

  • 经由过程键盘完成ctrl多选，shfit批量选的功用。

  • 怎样在angular去完成瀑布流

背面两个我都挑选了本身写指令去完成，键盘多选的指令现在在github上并没有发明过，而瀑布流的组件写的却是挺多的，然则都不合适我，由于在项目中我们的规划比较复杂，github上的项目在我的规划上面运用并没有结果。所以本身写了背面两个指令。本日要讲的是我的第一个指令 ngKeybordSelect

ngKeyBordSelect

ng-keybord-select

The angular directive can be used to select(mulitselect) item by ‘ctrl’ and ‘shfit’ （运用指令完成体系罕见的挑选功用,比方ctrl多选，shfit批量挑选的功用）

Update

  • 删除了Event和services,刚开始设想的时刻是时刻播送事宜，来处置惩罚选中状况的，然则厥后发明如许处置惩罚会致使统一页面下不能由多个组件，也就是组件不能自力，所以运用grid-group-data来猎取选中的数据

  • 加上全选功用(gridCheckAll)

Bower

    bower install --save-dev ng-keybord-select

Demo

Usage

<ANY grid-group grid-select-name>
    <ANY grid-check-all>
    </ANY>
    <ANY grid-selected grid-selected-item grid-selected-disabled>
        .....
    </ANY>
</ANY>

gridGroup Parameters

  • grid-select-name: 这个属性是用来绑定挑选的字段，假如该字段为true则代表代表当前纪录已被挑选

  • grid-group-data(新增): 这个属性是用来绑定挑选的数据信息，他终究的获得的结果是挑选的数据

gridSelected Parameters

  • grid-selected-item 该属性用来绑定当前纪录的数据，该数据将会被指令读取

  • grid-selected-disabled 假如改属性为true，则纪录不允许被选中

Event(已烧毁，运用grid-group-data替代所要完成的功用)

  • selectStart 当你在挑选某条纪录之前，组件会向上流传该事宜

  • selectEnd 当你挑选某条纪录以后，组件会向上流传该事宜

$rootScope.$on('selectEnd', function(event, data) { //data为你挑选的数据 selectItems = data; })

Services(已烧毁，运用grid-group-data替代所要完成的功用)

MulitGrid 供应了两个要领去猎取挑选的信息 getSelectItems 和 getItemsLength

 angular,module('xxx')
        .controller('xxxxxCtrl',['MulitGrid',function(MulitGrid){
            //猎取选中的一切数据
            var SelectItems = MulitGrid.getSelectItems();

            //猎取选中数据的数目
             var SelectItemLength = MulitGrid.getItemsLength();
        }])

就引见到这里了，假如你以为须要革新的处所迎接@我，别的关于瀑布流和完成更文雅的Modal的框的文章我抽出时刻写出来的

    原文作者：第三方x
    原文地址: https://segmentfault.com/a/1190000006740078
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞