angula组件－通过键盘实现多选（原创）

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

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

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

• 如何在angular去实现瀑布流

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

ngKeyBordSelect

Demo

• Simple Demo

• input(checkbox) 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的框的文章我抽出时间写出来的