AngularJS轻松实现双击排序的功能  更新时间:2016年08月30日 17:21:38   投稿:daisy   网上已经有AngularJS比较多的相关教程了,那么这篇文章我们一起来看一个AngularJS双击排序的例子,对大家日常开发很有帮助的,有需要的可以参考借鉴。 话不多说,直接看示例代码 HTML代码 单价 销售金额 销售数量 其中 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能有所帮助。 您可能感兴趣的文章: AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息) Angularjs添加排序查询功能的实例代码 mongoDB 多重数组查询(AngularJS绑定显示 nodejs) Angularjs分页查询的实现 AngularJS 过滤与排序详解及实例代码 AngularJS ng-table插件设置排序 angular-ui-sortable实现可拖拽排序列表 妙用Angularjs实现表格按指定列排序 Angular排序实例详解 angular过滤器实现排序功能 Angularjs使用过滤器完成排序功能 Angular实现的自定义模糊查询、排序及三角箭头标注功能示例 angularjs 排序 双击 相关文章 Angularjs根据json文件动态生成路由状态的实现方法 最近做项目遇到这样一个新需求,就是需要根据json文件动态生成路由状态,通过查阅相关资料实现了此功能,下面小编把问题总结分享到脚本之家平台供大家参考 2017-04-04 基于angularJS的表单验证指令介绍 下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-10-10 深入学习JavaScript的AngularJS框架中指令的使用方法 这篇文章主要介绍了深入学习JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入门学习中的基础知识,需要的朋友可以参考下 2016-03-03 AngularJS ng-bind 指令简单实现 本文主要介绍AngularJS ng-bind 指令,在这里对ng-bind 指令做了详细资料整理并讲解,提供了实例代码以便大家参考,有需要的小伙伴可以参考下 2016-07-07 AngularJS中ng-class用法实例分析 这篇文章主要介绍了AngularJS中ng-class用法,结合实例形式分析了ng-class的功能、使用方法与相关注意事项,需要的朋友可以参考下 2017-07-07 AngularJS入门知识之MVW类框架的编程思想探讨 这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下 2014-12-12 AngularJS ui-router (嵌套路由)实例 本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-03-03 angularjs 表单密码验证自定义指令实现代码 这篇文章主要介绍了angularjs 表单密码验证自定义指令实现代码,需要的朋友可以参考下 2016-10-10 Angular2搜索和重置按钮过场动画 这篇文章主要介绍了Angular2搜索和重置按钮过场动画,需要的朋友可以参考下 2017-05-05 详解如何将angular-ui的图片轮播组件封装成一个指令 本篇文章主要介绍了如何将angular-ui的图片轮播组件封装成一个指令 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 最新评论

话不多说,直接看示例代码

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能有所帮助。

您可能感兴趣的文章:

  • AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
  • Angularjs添加排序查询功能的实例代码
  • mongoDB 多重数组查询(AngularJS绑定显示 nodejs)
  • Angularjs分页查询的实现
  • AngularJS 过滤与排序详解及实例代码
  • AngularJS ng-table插件设置排序
  • angular-ui-sortable实现可拖拽排序列表
  • 妙用Angularjs实现表格按指定列排序
  • Angular排序实例详解
  • angular过滤器实现排序功能
  • Angularjs使用过滤器完成排序功能
  • Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
张贴在3