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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
js星星评分效果
Jul 24 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
js变量提升深入理解
Sep 16 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
vue3实现v-model原理详解
Oct 09 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下通过POST还是GET来传值
2008/06/05 PHP
深入解析php之sphinx
2013/05/15 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python中的字典遍历备忘
2015/01/17 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
异步传递消息系统的作用
2016/05/01 面试题
最新党员思想汇报
2014/01/01 职场文书
销售会计岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
初三语文教学反思
2016/03/03 职场文书