Angular component (ngkeybardselect) – multiple selection by keyboard

Time:2021-1-14

In the just concluded angular trading system project, there are several requirements that make me feel that it will take some time

  • How to use the modal box of angular bootstrap more elegantly.

  • Through the keyboard to achieve multi selection of Ctrl and batch selection of shfit.

  • How to realize waterfall flow in angular

I chose to write my own instructions to complete the latter two. Currently, I haven’t found the keyboard multiple-choice instructions on GitHub, while waterfall components write quite a lot, but they are not suitable for me, because our layout in the project is relatively complex, and the project on GitHub has no effect on my layout. So I wrote the following two instructions. Today is my first instructionngKeybordSelect

ngKeyBordSelect

ng-keybord-select

The angular directive can be used to select (mulit select) item by ‘Ctrl’ and ‘shrink’

Update


  • Events and services were deleted. At the beginning of the design, it was time to broadcast events to process the selected state. However, it was found that such processing would result in that multiple components could not be used on the same page, that is, the components could not be independent, so grid group data was used to obtain the selected data

  • Plus 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:This property is used to bind the selected field. If the field is true, it means that the current record has been selected

  • Grid group data (New)This attribute is used to bind the selected data information, and the final result is the selected data

gridSelected Parameters


  • grid-selected-itemThis attribute is used to bind the current recorded data, which will be read by the instruction

  • grid-selected-disabledIf the property is changed to true, the record is not allowed to be selected

Event (obsolete, using grid group data instead of the function to be implemented)

  • selectStartWhen you select a record, the component propagates the event up

  • selectEndWhen you select a record, the component propagates the event up

$rootscope. $on ('selectend ', function (event, data) {// data is the data you selected, selectitems = data;})

Services (obsolete, using grid group data instead of the function to be implemented)

Mulitgrid provides two methods to get the selection information, getselectitems and getitemslength

angular,module('xxx')
        .controller('xxxxxCtrl',['MulitGrid',function(MulitGrid){
            //Get all selected data
            var SelectItems = MulitGrid.getSelectItems();

            //Gets the number of selected data
             var SelectItemLength = MulitGrid.getItemsLength();
        }])

That’s it. If you feel that you need to improve, welcome @ me. In addition, I took the time to write articles about waterfall flow and the box of realizing more elegant modal