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 多级下拉菜单核心代码
May 21 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js常用排序实现代码
Dec 28 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Axios取消重复请求的方法实例详解
Jun 15 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
珊瑚虫IP库浅析
2007/02/15 PHP
php 中文和编码判断代码
2010/05/16 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
python创建进程fork用法
2015/06/04 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python的socket编程入门
2018/01/29 Python
python入门之基础语法学习笔记
2020/02/08 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python sorted对list和dict排序
2020/06/09 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
订货会邀请函
2015/01/31 职场文书
军事理论课感想
2015/08/11 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
正则表达式基础与常用验证表达式
2022/06/16 Javascript
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript