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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
跟我学习javascript的this关键字
May 28 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 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程序
2006/10/09 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python虚拟环境完美部署教程
2019/08/06 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
大学毕业自我评价
2014/02/02 职场文书
期中考试后的反思
2014/02/08 职场文书
2014年个人委托书范本
2014/10/13 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers