angular如何实现一个列表的选择全选交互组件-创新互联
这篇文章给大家分享的是有关angular如何实现一个列表的选择全选交互组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
网站的建设成都创新互联公司专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为服务器租用等企业提供专业服务。需求分析
实现单选;
实现全选;
可以设置允许多选还是单选。如果多选,有大选择数限制;
实现跨页选择。这里的跨页选择指的是切换到下一页后,还能记住上一页的选择。以前我们遇到的选择往往都是只记住当前页,一旦刷新就清空了。这是一个不同的地方;
要求自己定义UI及交互触发;
设计思路
这里其实是相同的地方就是选择的交互逻辑,所以重点考虑如何封装这个逻辑。这里的交互逻辑主要是: 2. 点击全选; 3. 点击列表item的选择切换。如果是单选,要清空之前的选择;如果是多选,要检查是否超过大选择限制;
再来看一下应用场景相同的地方。我们将设定上下文肯定有一个list数组,一个已选数组。 因此,我们得到如下的指令。
moSelect指令
封装全选逻辑的指令。适应场景:
有一个list集合;
每一个item是一个对象;
跨页选择;
使用方式
商户名称 | 电话 | 地点 | 更新时间 | 播放 | |
---|---|---|---|---|---|
{{item.name}} | {{item.tel}} | {{item.addr}} | {{item.updateTime|msDateFormat:'YYYY-MM-DD'}} |
|
说明:
1、主要通过三个指令实现全选相关的代码封装;
2、mo-select 是容器指令,定义了全选,以及单选 item 的方法,定义在列表容器dom上;
mo-select的 值是scope的 list 对象,与 ng-repeat 里的 items 一致;
item-name :告诉指令,每一项的对象名,指令会通过该名称在每一项的scope里查找。与ng-repeat里的 item 一致;
select-all-name :全选的状态变量。默认: isSelectedAll
item-select-name : 记录的每一项对象是否选中的变量名,将会存储在 item 对象上,为了避免与现有业务字段重合,可以配置,也可以不配置,默认: select ;
selected-list-name :已选对象列表的变量名。默认: selectedList ;
init-selected-list :初始化选择对象列表。该变量只用于初始化,类似 vue 组件里的 prop 属性;
allow-multiple-select :是否允许多选;
select-count-limit :如果允许多选,最多可以选择多少个。如果不传,则无限;
item-equal-func :对象判等函数,用于封装业务对象自己的判等原则。比如:有些场景是根据id,有些是根据其他业务逻辑。如果不传,默认根据对象的id属性;
3、mo-select-all 全选指令。定义在全选 dom 上,一版是一个 input checkbox 。其值表示在当前scope保存的是否全选的变量名;
4、mo-select-single 单选指令。 定义在每一项 dom 上。可以有两个地方:
定义在自己的 input chebox 上
定义在 input 的容器上。类似 tr ,实现点击整行选中。也可以定义在某个单个元素上。
如果要获取已选项,直接在当前scope获取 selected-list-name 指定的变量名即可。
使用步骤:
在容器定义 mo-select ,根据实际需求,配置相关参数。必须: mo-select , item-name ;
在需要全选的按钮 dom 上添加 mo-select-all 指令,不需要配置任何参数;
在 ng-repeat 的单项模板里,在需要添加单选交互的 dom 上添加 mo-select-single 指令,不需要配置任何参数;
完成配置。
注意事项
mo-select 的值一定要和ng-repeat的 items 一致;
item-name 的值一定要和ng-repeat的 item 一致;
总结
这样的指令在我们的业务开发中使用还是很灵活的。可能看起来配置项有点麻烦,其实大多数都是可以采用默认值的。我们看看它的不同表现形式:
感谢各位的阅读!关于“angular如何实现一个列表的选择全选交互组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:angular如何实现一个列表的选择全选交互组件-创新互联
分享网址:http://myzitong.com/article/dgjihe.html