AngularJS轻松实现双击排序的功能


Posted in Javascript onAugust 30, 2016

话不多说,直接看示例代码

HTML代码

<th class="col-md-3"><a href="" ng-click="desc('2',la=!la)">单价</a></th>
 <th class="col-md-3"><a href="" ng-click="desc('3',la=!la)">销售金额</a></th>
 <th class="col-md-1"><a href="" ng-click="desc('4',la=!la)">销售数量</a></th>

其中 la=!la 是用来判断当前点击是true还是false

JS代码

//开始默认为totalnum字段 按照降序排列

$scope.foodsale =ret.sort(function ( x,y )
    {
     return y.totalnum - x.totalnum;//这样表示 按照ret【表示接收返回数组】里面的totalnum字段 按照降序排列 反之 return x.totalnum - y.totalnum; 为升序
})


 $scope.desc= function (fla,bol) {
   if(fla=="4"){
    if(bol==false){
     
     $scope.foodsale =$scope.foodsale.sort(function ( x,y )
     {
      return y.totalnum - x.totalnum;
     })
    }else{
     console.log("bbb")
     $scope.foodsale =$scope.foodsale.sort(function ( x,y )
     {
      return x.totalnum - y.totalnum;
     })
    }
   }else if(fla=="3"){//totalmoney
    if(bol==false){
     $scope.foodsale =$scope.foodsale.sort(function ( x,y )
     {
      return y.totalmoney - x.totalmoney;
     })
    }else{
     $scope.foodsale =$scope.foodsale.sort(function ( x,y )
      {
       return x.totalmoney - y.totalmoney;
      }
     )
    }
   }else if(fla=="2"){//price
    if(bol==false){
     $scope.foodsale =$scope.foodsale.sort(function ( x,y )
     {
      return y.price - x.price;
     })
    }else{
     $scope.foodsale =$scope.foodsale.sort(function ( x,y )
      {
       return x.price - y.price;
      }
     )
    }
   }

总结

好了,以上就是AngularJS实现双击排序功能的全部内容,通过以上示例代码便可实现双击排序,希望对大家学习AngularJS能有所帮助。

Javascript 相关文章推荐
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
Angularjs过滤器使用详解
May 25 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
vue组件中的数据传递方法
May 14 Javascript
微信小程序实现签到功能
Oct 31 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 #Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 #Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 #Javascript
浅谈javascript中的Function和Arguments
Aug 30 #Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 #Javascript
Laravel中常见的错误与解决方法小结
Aug 30 #Javascript
js中常用的Tab切换效果(推荐)
Aug 30 #Javascript
You might like
PHP 变量类型的强制转换
2009/10/23 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
党员公开承诺书范文
2014/03/25 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers