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代码
Sep 17 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue实现通讯录功能
Jul 14 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
js实现简易拖拽的示例
Oct 26 Javascript
JavaScript实现登录窗体
Jun 22 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php返回json数据函数实例
2014/10/09 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python回调函数用法实例详解
2015/07/02 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python math模块的基本使用教程
2021/01/16 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
标准自荐信范文
2014/01/29 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
询价采购方案
2014/06/09 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
行政经理岗位职责
2015/04/15 职场文书