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或css实现滚动广告的几种方案
Jan 28 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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 Token(令牌)设计
2008/03/15 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php微信开发之关注事件
2018/06/14 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python 专题一 函数的基础知识
2017/03/16 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
分公司总经理岗位职责
2014/07/30 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
幼儿园辞职信
2015/05/13 职场文书
人与自然的观后感
2015/06/18 职场文书