AngularJS轻松实现双击排序的功能

 更新时间:2016年08月30日 17:21:38   投稿:daisy  
网上已经有AngularJS比较多的相关教程了,那么这篇文章我们一起来看一个AngularJS双击排序的例子,对大家日常开发很有帮助的,有需要的可以参考借鉴。

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

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

相关文章

  • NodeJs——入门必看攻略

    NodeJs——入门必看攻略

    下面小编就为大家带来一篇NodeJs——入门必看攻略。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 使用angular-cli webpack创建多个包的方法

    使用angular-cli webpack创建多个包的方法

    这篇文章主要介绍了使用angular-cli webpack创建多个包的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs 自定义服务的三种方式(推荐)

    Angularjs 自定义服务的三种方式(推荐)

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务。这篇文章主要介绍了Angularjs 自定义服务的三种方式,非常不错,需要的朋友可以参考下
    2016-08-08
  • angular 基于ng-messages的表单验证实例

    angular 基于ng-messages的表单验证实例

    本篇文章主要介绍了angular 基于ng-messages的表单验证实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • AngularJS select加载数据选中默认值的方法

    AngularJS select加载数据选中默认值的方法

    下面小编就为大家分享一篇AngularJS select加载数据选中默认值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • angular4应用中输入的最小值和最大值的方法

    angular4应用中输入的最小值和最大值的方法

    这篇文章主要介绍了angular4应用中输入的最小值和最大值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 详解webpack+es6+angular1.x项目构建

    详解webpack+es6+angular1.x项目构建

    这篇文章主要介绍了详解webpack+es6+angular1.x项目构建, 小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • AngularJS实现给动态生成的元素绑定事件的方法

    AngularJS实现给动态生成的元素绑定事件的方法

    这篇文章主要介绍了AngularJS实现给动态生成的元素绑定事件的方法,结合实例形式分析了AngularJS动态生成元素与事件绑定相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • Angular8升级至Angular13遇到的问题解决

    Angular8升级至Angular13遇到的问题解决

    这几天升级公司的一个Angular项目遇到了一些问题,下面这篇文章主要给大家介绍了关于Angular8升级至Angular13遇到的问题解决,文中介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • Angular.js组件之input mask对input输入进行格式化详解

    Angular.js组件之input mask对input输入进行格式化详解

    这篇文章主要给大家介绍了关于Angular.js组件之input mask对input输入进行格式化的相关内容,文中通过示例代码详细介绍了将银行卡号和日期的方法,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-07-07

最新评论