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 相关文章推荐
JS日期加减,日期运算代码
Nov 05 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
简述安装Slackware Linux系统的过程
2012/01/12 面试题
中学教师管理制度
2014/01/14 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
留学推荐信英文范文
2015/03/26 职场文书
初中化学教学反思
2016/02/22 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
instantclient客户端 连接oracle数据库
2022/04/26 Oracle