首页web前端 › AngularJS 购物车全选/撤废全选成效的落到实处情势

AngularJS 购物车全选/撤废全选成效的落到实处情势

二〇一七年一月4日,笔者原先能够像别的同期同样早点归家,玩几把王者手机游戏,不过笔者未曾,因为本人采取留下来,写一篇博客。

开垦业务后台平日要用到表格里的选拔,全选这种相互。而且不一致种类不一致场景的UI还分化等。举例:表格里就是简简单单的checkbox;图片列表这种,UI设计员会搞点花样,用户采取一下,会在图片上盖一层半透明的勾选提示等等。我们的体系是用angular
1.X版本开垦。所以,小编利用angular的装饰性指令编写几个指令,把它们合营在协同使用,来封装那样的境况。那与事先我们蒙受的零件的支出思路又不太一样。大家先来剖判一下须要及增添点。

演示三个微细的例证:在购物车上面,我们可以勾选本身所选的商品,然后能够显得出相应的标价。
1、首先展现出相应的分界面:

刚上学angularJS,于是练习写了二个像样于购物车的全选/撤销全选的效用,主要实现的功能有:

花色中日常性的会遭逢怎么样点击“全选”开关,勾中全部“单选按键”,当全数单选开关勾选后,全选开关自动勾选,这里作者并不是想说那是何等难的多个思想政治工作,笔者只是想炫酷下自个儿写的事物。

须要分析

新萄京手机版官网 1 

1、勾选全选checkbox,列表数据总体被勾选,撤废同理,用ng-model实现双向绑定;

(勾选与否,是切换类名来达成的)换三个背景图片而已

  1. 落实单选;
  2. 金玉满堂全选;
  3. 能够设置允好多选如故单选。若是多选,有最选举择数限制;
  4. 贯彻跨页选用。这里的跨页采用指的是切换成下一页后,还是能记住上一页的精选。以前大家相见的选拔往往都以只记住当前页,一旦刷新就清空了。那是一个两样的地方;
  5. 供给本人定义UI及相互触发;

连锁代码:

2、选中列表中的全部checkbox,全选也会被勾选;(这里小编想开的法门是给每三个对象扩充checked字段,然后勾选触发echoChange()函数,用了叁个cc变量计算当前checked为true的个数,然后再判定被勾选个数与数CEO度是或不是等于,相等则表达全体被勾选,于是全选开关也赋值为true;不明白还应该有未有更简约的情势?有请留言告知自个儿,多谢!)

1)页面内容(静态页)

设计思路

<body> 
  商品列表:<br/> 
  笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 
  台式机<input type="checkbox" onclick="chose(this)" name="mm" value="2900"/> 2900 
  路由器<input type="checkbox" onclick="chose(this)" name="mm" value="90"/> 90 
  <br/> 
  家常用品<input type="checkbox" onclick="chose(this)" name="mm" value="500"/>500 
  洗衣机<input type="checkbox" onclick="chose(this)" name="mm" value="5600"/> 5600 
  <br/>全选<input type="checkbox" name="all" onclick="allCheck(this)" /> 
  <br/><input type="button" value="查看金额" name="btn" onclick="sumall()"/>  

 </body> 

3、全体勾选后,只要打消二个全选的check状态就为false;

<ul class='list-inline my-list-inline'>
  <li class="action-check" ng-class="{'active':allHasChoice}" ng-click="clicktarget(true,tmp,dataList)">
  <li>中文名称</li>
  <li>英文名称</li>
  <li>申请人类型</li>
<ul>
<div class="list-data">
<table>
  <tbody>
    <tr ng-repeat="tmp in dataList track by tmp.idTell"
      ng-class="{true:'active',false:''}[targetChoice[tmp.idTell]==true]"
      ng-click="ctmlicktarget(false,tmp,dataList)" 
    >
      <td> 
        
        
      </td>
       <td> 
        
       </td>
      <td> 
        
      </td>
   </tr> 
  </tbody>
</table>
  1. 此间其实是一样的地点就是选项的并行逻辑,所以重要思索怎么着封装那几个逻辑。这里的相互逻辑首若是: 2.
    点击全选; 3.
    点击列表item的抉择切换。如果是单选,要清空此前的采用;假使是多选,要反省是不是当先最大选择范围;
  2. 再来看一下使用场景相同的地点。大家将设定上下文肯定有几个list数组,二个已选数组。
    由此,大家得到如下的授命。

小心:在checkbox中,倘若属于同一组的,在复选框的习性内name="mm"属性要写同样;到时候方便遍历所选项;在radio中,name="mm"也要安装相同,便于属于同一组相互区分。
2、全选开关的设置

4、完毕购物车的小计和总金额计算,仅计算被勾选的商品;

新萄京手机版官网,2)js代码

moSelect指令

新萄京手机版官网 2

留存待完善的难题:

第一当然有三个参数数组,用于经营经营渲染页面:

卷入全选逻辑的吩咐。适应场景:

连锁代码:

1、数量笔者用了type="number",设置了min=10,但手动输入的值未有做限定,所以假若手动输入会有不合法值;

转载本站文章请注明出处:新萄京娱乐网址2492777 http://www.cdhbjs.com/?p=3489

上一篇:

下一篇:

相关文章