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 相关文章推荐
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
React列表栏及购物车组件使用详解
Jun 28 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+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
python中遍历文件的3个方法
2014/09/02 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
git进行版本控制心得详谈
2017/12/10 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
大学生创业策划书
2014/02/02 职场文书
标准毕业生自荐信
2014/06/24 职场文书
公司表扬信格式
2015/05/04 职场文书
整脏治乱工作简报
2015/07/21 职场文书
python入门之算法学习
2021/04/22 Python
Django框架中表单的用法
2022/06/10 Python
Go语言编译原理之变量捕获
2022/08/05 Golang