angula组件-通过键盘实现多选(原创)

在刚刚结束的angular交易系统项目中有几个需求是让我感觉要花点时间的

  • 如何更优雅的使用angular-bootstrap 的 Modal框。

  • 通过键盘实现ctrl多选,shfit批量选的功能。

  • 如何在angular去实现瀑布流

后面两个我都选择了自己写指令去完成,键盘多选的指令目前在github上并没有发现过,而瀑布流的组件写的倒是挺多的,但是都不适合我,因为在项目中我们的布局比较复杂,github上的项目在我的布局上面使用并没有效果。所以自己写了后面两个指令。今天要讲的是我的第一个指令 ngKeybordSelect

ngKeyBordSelect

Demo

Usage

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

gridGroup Parameters

  • grid-select-name: 这个属性是用来绑定选择的字段,如果该字段为true则代表代表当前记录已经被选择

gridSelected Parameters

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

  • grid-selected-disabled 如果改属性为true,则记录不允许被选中

Event

  • selectStart 当你在选择某条记录之前,组件会向上传播该事件

  • selectEnd 当你选择某条记录之后,组件会向上传播该事件

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

Services

  • MulitGrid 提供了两个方法去获取选择的信息 getSelectItems 和 getItemsLength

 
    angular,module('xxx')
        .controller('xxxxxCtrl',['MulitGrid',function(MulitGrid){ //获取选中的所有数据 var SelectItems = MulitGrid.getSelectItems(); //获取选中数据的数量 var SelectItemLength = MulitGrid.getItemsLength(); }]) 

就介绍到这里了,如果你觉得需要改进的地方欢迎@我,另外关于瀑布流和实现更优雅的Modal的框的文章我抽出时间写出来的

转载于:https://www.cnblogs.com/HeJason/p/5816963.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值