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 相关文章推荐
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 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进程计数类Process用法实例详解
2015/09/25 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
动态加载js的几种方法
2006/10/23 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python模块的加载讲解
2019/01/15 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
深入浅析Python中的迭代器
2019/06/04 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Django密码存储策略分析
2020/01/09 Python
python文件及目录操作代码汇总
2020/07/08 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
车祸赔偿收入证明
2014/01/09 职场文书
班班通项目实施方案
2014/02/25 职场文书
和解协议书
2014/04/16 职场文书