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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
vue实现表单录入小案例
Sep 27 Javascript
Js和VUE实现跑马灯效果
May 25 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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jquery中动态效果小结
2010/12/16 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vue移动端路由切换实例分析
2018/05/14 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Python常用列表数据结构小结
2014/08/06 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python async with和async for的使用
2019/06/20 Python
python实现电子书翻页小程序
2019/07/23 Python
python 命令行传入参数实现解析
2019/08/30 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
JAVA代码查错题
2014/10/10 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
物流管理应届生求职信
2013/11/07 职场文书
经济担保书范文
2014/04/02 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
个人党性分析总结
2015/03/05 职场文书
学生检讨书怎么写
2015/05/07 职场文书
谢师宴家长答谢词
2015/09/30 职场文书