Angular writes an example of Selecting All interactive components for a list, and angular Selects all interactive components.

Angular writes an example of Selecting All interactive components for a list, and angular Selects all interactive components.

The selection in the table is often used in the development business background. Select all the interactions. In addition, the UI varies with different systems and scenarios. For example, the table contains a simple checkbox. For the image list, the UI Designer will make some tricks. If you choose one, the UI Designer will create a translucent check prompt on the image. Our system is developed with angular 1.x. Therefore, I use angular decorative commands to write several commands and use them together to encapsulate such scenarios. This is not the same as the development idea of the components we have encountered before. Let's analyze the requirements and expansion points first.

Requirement Analysis

1. Implement single choice;
2. Select All;
3. You can set whether to allow multiple choice or single choice. If multiple options are selected, the maximum number of options is limited;
4. Implement cross-page selection. The cross-page selection here refers to the selection of the previous page after switching to the next page. In the past, we often used to remember only the current page and cleared it once refreshed. This is a different place;
5. Define the UI and interaction trigger by yourself;

Design Concept

1. The interaction logic is the same here, so we should focus on how to encapsulate this logic. Here, the interaction logic is mainly: 2. Click Select All; 3. Click Select switch of the list item. If it is a single choice, you need to clear the previous selection; if it is a multiple choice, you need to check whether the maximum selection limit is exceeded;
2. Let's take a look at the same scenarios. We will set the context to definitely have a list array, a selected array. Therefore, we get the following command.

MoSelect command

Encapsulate all-selected logic commands. Applicable scenarios:

1. There is a list set;
2. Each item is an object;
3. Cross-page selection;

Usage

<Table mo-select = "list" select-all-name = "isSelectedAll" item-name = "item" item-select-name = "select" selected-list-name = "selectedList" init-selected-list = "initSelectedList" allow-multiple-select = "false" select-count-limit = "2" item-equal-func = "itemEqual"> <thead> <tr> <th> <input type = "checkbox" ng-checked = "isSelectedAll" mo-select-all> </th> <th> merchant name </ th> <th> phone number </th> <th> location </th> <th> Update time </th> <th> playback </t H> </tr> </thead> <tbody> <tr ng-repeat = "item in list" mo-select-single> <td> <input type = "checkbox" ng-checked = "item. select "mo-select-single1> </td> <td> {item. name }}</td> <td >{{ item. tel }}</td> <td >{{ item. addr }}</td> <td >{{ item. updateTime | msDateFormat: 'yyyy-MM-DD '}}</td> <div audio-playable = "item. url "play-trigger = ". audio-play "pause-trigger = ". audio-pause "> <button class =" btn-primary Audio-play "ng-show = "! AudioInfo. playing "> play </button> <button class =" btn-primary audio-pause "ng-show =" audioInfo. playing "> pause </button> </div> </td> </tr> </tbody> </table>

Note:

1. Use three commands to encapsulate all the relevant code;

2. mo-select is a container command that defines the full selection and single-choice item methods, which are defined on the list container dom;

1. The mo-select value is the list object of scope, which is consistent with the items in ng-repeat;
2. Item-name: indicates the object name of each item. The command searches for the object name in the scope of each item. Consistent with items in ng-repeat;
3. Select-all-name: select all state variables. Default Value: isSelectedAll
4. Item-select-name: whether the variable name is selected for each record object is stored on the item object. To avoid overlap with existing business fields, you can configure it, you can also leave it unconfigured. Default Value: select;
5. Selected-list-name: variable name of the list of selected objects. Default Value: selectedList;
6. Init-selected-list: Initialize the list of selected objects. This variable is only used for initialization, similar to the prop attribute in the vue component;
7. Allow-multiple-select: whether to allow multiple selections;
8. Select-count-limit: You can select a maximum of multiple options. If this parameter is not set, the value is unlimited;
9. Item-equal-func: object judgment and other functions, used to encapsulate the judgment principles of business objects. For example, some scenarios are based on id, and some are based on other business logic. If this parameter is not specified, the Object id attribute is used by default;

3. mo-select-all command. Defined on the all-selected dom. The first version is an input checkbox. The value indicates whether all variable names are saved in the current scope;
4. mo-select-single-choice instruction. Defined on each dom. There can be two points:

1. Defined on your input chebox
2. It is defined on the input container. Similar to tr, click the entire row to select. It can also be defined on a single element.

If you want to obtain the selected variable name, you can directly obtain the variable name specified by selected-list-name in the current scope.

Procedure:

1. In the container definition mo-select, configure relevant parameters as needed. Required: mo-select, item-name;
2. Add the mo-select-all command on the button dom to be fully selected without configuring any parameters;
3. In a single template of ng-repeat, add the mo-select-single command to the dom where single-choice interaction needs to be added without any parameters;
4. Complete the configuration.

Notes

1. The mo-select value must be consistent with the items of ng-repeat;
2. The value of item-name must be consistent with that of ng-repeat;

Summary

Such commands are flexible in our business development. Configuration items may seem a little troublesome. In fact, most of them can use default values. Let's take a look at its different forms:

There are not many codes. For example, the Code is extracted from the project. It is not very complex and you have not done a demo. Here we will share the code and link it. If you are interested in improvement, you can change it as needed.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.