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的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
js实现随机圆与矩形功能
Oct 29 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实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
javascript 日期常用的方法
2009/11/11 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
详解Python 切片语法
2019/06/10 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python中线程和进程有何区别
2020/06/17 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
环保公益广告语
2014/03/13 职场文书
大学社团计划书
2014/05/01 职场文书
设备售后服务承诺书
2014/05/30 职场文书
与美同行演讲稿
2014/09/13 职场文书
2016寒假假期总结
2015/10/10 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS