angular如何实现一个列表的选择全选交互组件

            
              
                
                商户名称
                电话
                地点
                更新时间
                播放
              
            
            
              
                
                    
                
                {{item.name}}
                {{item.tel}}
                {{item.addr}}
                {{item.updateTime|msDateFormat:'YYYY-MM-DD'}}
                
                  
                    播放
                    暂停
                  

说明：

1、主要通过三个指令实现全选相关的代码封装；

2、mo-select 是容器指令，定义了全选，以及单选 item 的方法，定义在列表容器dom上；

1. mo-select的 值是scope的 list 对象，与 ng-repeat 里的 items 一致；

2. item-name ：告诉指令，每一项的对象名，指令会通过该名称在每一项的scope里查找。与ng-repeat里的 item 一致；

3. select-all-name :全选的状态变量。默认： isSelectedAll

4. item-select-name : 记录的每一项对象是否选中的变量名，将会存储在 item 对象上，为了避免与现有业务字段重合，可以配置，也可以不配置，默认： select ；

5. selected-list-name :已选对象列表的变量名。默认： selectedList ；

6. init-selected-list ：初始化选择对象列表。该变量只用于初始化，类似 vue 组件里的 prop 属性；

7. allow-multiple-select :是否允许多选；

8. select-count-limit ：如果允许多选，最多可以选择多少个。如果不传，则无限；

9. item-equal-func ：对象判等函数，用于封装业务对象自己的判等原则。比如：有些场景是根据id，有些是根据其他业务逻辑。如果不传，默认根据对象的id属性；

3、mo-select-all 全选指令。定义在全选 dom 上，一版是一个 input checkbox 。其值表示在当前scope保存的是否全选的变量名；
4、mo-select-single 单选指令。 定义在每一项 dom 上。可以有两个地方：

1. 定义在自己的 input chebox 上

2. 定义在 input 的容器上。类似 tr ，实现点击整行选中。也可以定义在某个单个元素上。

如果要获取已选项，直接在当前scope获取 selected-list-name 指定的变量名即可。

使用步骤：

1. 在容器定义 mo-select ，根据实际需求，配置相关参数。必须： mo-select ， item-name ;

2. 在需要全选的按钮 dom 上添加 mo-select-all 指令，不需要配置任何参数；

3. 在 ng-repeat 的单项模板里，在需要添加单选交互的 dom 上添加 mo-select-single 指令，不需要配置任何参数；

4. 完成配置。

注意事项

1. mo-select 的值一定要和ng-repeat的 items 一致；

2. item-name 的值一定要和ng-repeat的 item 一致；

总结

这样的指令在我们的业务开发中使用还是很灵活的。可能看起来配置项有点麻烦，其实大多数都是可以采用默认值的。我们看看它的不同表现形式：

感谢各位的阅读！关于“angular如何实现一个列表的选择全选交互组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！