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+JSon 无刷新分页实现代码
Apr 01 Javascript
js post方式传递提交的实现代码
May 31 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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 时间转换Unix时间戳代码
2010/01/22 PHP
用php解析html的实现代码
2011/08/08 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
教你安装python Django(图文)
2013/11/04 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python的依赖管理的实现
2019/05/14 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
村容村貌整治方案
2014/05/21 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
大学生村官入党自传
2015/06/26 职场文书
大学生创业计划书
2019/06/24 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis