网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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

这篇文章给大家分享的是有关angular如何实现一个列表的选择全选交互组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联是一家专业提供定西企业网站建设,专注与做网站、成都网站建设、H5技术、小程序制作等业务。10年已为定西众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

需求分析

  1. 实现单选;

  2. 实现全选;

  3. 可以设置允许多选还是单选。如果多选,有最大选择数限制;

  4. 实现跨页选择。这里的跨页选择指的是切换到下一页后,还能记住上一页的选择。以前我们遇到的选择往往都是只记住当前页,一旦刷新就清空了。这是一个不同的地方;

  5. 要求自己定义UI及交互触发;

设计思路

  1. 这里其实是相同的地方就是选择的交互逻辑,所以重点考虑如何封装这个逻辑。这里的交互逻辑主要是: 2. 点击全选; 3. 点击列表item的选择切换。如果是单选,要清空之前的选择;如果是多选,要检查是否超过最大选择限制;

  2. 再来看一下应用场景相同的地方。我们将设定上下文肯定有一个list数组,一个已选数组。 因此,我们得到如下的指令。

moSelect指令

封装全选逻辑的指令。适应场景:

  1. 有一个list集合;

  2. 每一个item是一个对象;

  3. 跨页选择;

使用方式


            
              
                
                商户名称
                电话
                地点
                更新时间
                播放
              
            
            
              
                
                    
                
                {{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如何实现一个列表的选择全选交互组件

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

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


文章标题:angular如何实现一个列表的选择全选交互组件
文章位置:http://bjjierui.cn/article/gepoci.html

其他资讯