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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
javascript 出生日期和身份证判断大全
Nov 13 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
javascript实现简易计算器的代码
May 31 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 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多线程异步请求的3种方法
2014/01/17 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
document.compatMode介绍
2009/05/21 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
python正则表达式的使用
2017/06/12 Python
Python之修改图片像素值的方法
2019/07/03 Python
python中安装django模块的方法
2020/03/12 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
京东国际站:JOYBUY
2017/11/23 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
virtualenv隔离Python环境的问题解析
2022/06/21 Python