开发业务后台经常要用到表格里的选择，全选这种交互。而且不同系统不同场景的UI还不一样。比如：表格里就是简简单单的checkbox；图片列表这种，UI设计师会搞点花样，用户选择一下，会在图片上盖一层半透明的勾选提示等等。我们的系统是用angular 1.X版本开发。所以，我采用angular的装饰性指令编写几个指令，把它们配合在一起使用，来封装这样的场景。这与之前我们遇到的组件的开发思路又不太一样。我们先来分析一下需求及扩展点。
需求分析
实现单选；
实现全选；
可以设置允许多选还是单选。如果多选，有最大选择数限制；
实现跨页选择。这里的跨页选择指的是切换到下一页后，还能记住上一
在开发Web应用时，Angular框架提供了强大的数据绑定和指令系统，使得构建复杂的交互组件变得相对简单。本示例中，我们将探讨如何使用Angular 1.X版本编写一个具有选择全选功能的列表交互组件。这个组件适用于多种场景，包括表格、图片列表等，允许单选、全选，并支持设置多选和最大选择数限制，同时具备跨页选择功能。
**需求分析**
1. **实现单选**：用户可以点击列表中的某一项进行选择，每次只能选择一个。
2. **实现全选**：提供一个全选按钮，可以一键选中所有列表项。
3. **切换多选模式**：允许用户在单选和多选模式间切换。在多选模式下，可设置最大选择数。
4. **跨页选择**：用户在不同页面间的选项选择能够被保存，即使翻页后也不会丢失。
5. **自定义UI和交互触发**：组件应允许开发者根据具体UI设计和交互需求进行定制。
**设计思路**
为了满足上述需求，我们需要创建几个装饰性指令来封装选择逻辑：
1. **moSelect指令**：作为容器指令，它包含了全选逻辑，并定义了与列表项交互的方法。它需要知道列表对象（`list`），以及每个项的属性名（`itemName`）和是否选中的状态变量（`itemSelectName`）。
2. **moSelectAll指令**：负责全选/取消全选的功能，其状态通过`selectAllName`变量控制。
3. **moSelectSingle指令/ moSelectSingle1指令**：用于处理单个列表项的选择切换。在单选模式下，当选中其他项时，会自动取消之前选中的项。在多选模式下，会检查是否超过最大选择数限制。
**指令实现**
指令的使用方式如下：
```html
<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>
<!-- 其他列 -->
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr ng-repeat="item in list" mo-select-single>
<td><input type="checkbox" ng-checked="item.select" mo-select-single1></td>
<!-- 其他列 -->
</tr>
</tbody>
</table>
```
**参数说明**
- `mo-select`：列表对象，与`ng-repeat`中的`items`一致。
- `item-name`：每项对象的名称，指令通过此名查找项的属性。
- `select-all-name`：全选状态变量的名称，默认为`isSelectedAll`。
- `item-select-name`：记录每项对象是否选中的变量名，存储在`item`对象上，默认为`select`。
- `selected-list-name`：已选对象列表的变量名，默认为`selectedList`。
- `init-selected-list`：初始化选择对象列表的变量，仅用于初始化。
- `allow-multiple-select`：是否允许多选，如果为`false`则强制单选。
- `select-count-limit`：多选模式下的最大选择数。
- `item-equal-func`：比较函数，用于在跨页选择时判断两个项是否相同。
通过这种方式，我们可以灵活地构建一个可复用的列表选择组件，适应各种业务需求。在实际开发中，可能还需要处理更多细节，例如错误处理、事件绑定等，但上述内容已经涵盖了核心功能的实现。在Angular中，这种组件化的思维方式有助于提高代码复用性和维护性，减少重复工作。
