欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS輕松實(shí)現(xiàn)雙擊排序的功能

 更新時(shí)間:2016年08月30日 17:21:38   投稿:daisy  
網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了,那么這篇文章我們一起來看一個(gè)AngularJS雙擊排序的例子,對大家日常開發(fā)很有幫助的,有需要的可以參考借鑒。

話不多說,直接看示例代碼

HTML代碼

 <th class="col-md-3"><a href="" ng-click="desc('2',la=!la)">單價(jià)</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)">銷售數(shù)量</a></th>

其中 la=!la 是用來判斷當(dāng)前點(diǎn)擊是true還是false

JS代碼

//開始默認(rèn)為totalnum字段 按照降序排列

$scope.foodsale =ret.sort(function ( x,y )
    {
     return y.totalnum - x.totalnum;//這樣表示 按照ret【表示接收返回?cái)?shù)組】里面的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;
      }
     )
    }
   }

總結(jié)

好了,以上就是AngularJS實(shí)現(xiàn)雙擊排序功能的全部內(nèi)容,通過以上示例代碼便可實(shí)現(xiàn)雙擊排序,希望對大家學(xué)習(xí)AngularJS能有所幫助。

相關(guān)文章

  • NodeJs——入門必看攻略

    NodeJs——入門必看攻略

    下面小編就為大家?guī)硪黄狽odeJs——入門必看攻略。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • 使用angular-cli webpack創(chuàng)建多個(gè)包的方法

    使用angular-cli webpack創(chuàng)建多個(gè)包的方法

    這篇文章主要介紹了使用angular-cli webpack創(chuàng)建多個(gè)包的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • Angularjs 自定義服務(wù)的三種方式(推薦)

    Angularjs 自定義服務(wù)的三種方式(推薦)

    angularjs 中可通過三種($provider,$factory,$service)方式自定義服務(wù)。這篇文章主要介紹了Angularjs 自定義服務(wù)的三種方式,非常不錯(cuò),需要的朋友可以參考下
    2016-08-08
  • angular 基于ng-messages的表單驗(yàn)證實(shí)例

    angular 基于ng-messages的表單驗(yàn)證實(shí)例

    本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法

    AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法

    下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • angular4應(yīng)用中輸入的最小值和最大值的方法

    angular4應(yīng)用中輸入的最小值和最大值的方法

    這篇文章主要介紹了angular4應(yīng)用中輸入的最小值和最大值的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-05-05
  • 詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建

    詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建

    這篇文章主要介紹了詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建, 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法

    AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)生成元素與事件綁定相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12
  • Angular8升級至Angular13遇到的問題解決

    Angular8升級至Angular13遇到的問題解決

    這幾天升級公司的一個(gè)Angular項(xiàng)目遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于Angular8升級至Angular13遇到的問題解決,文中介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • Angular.js組件之input mask對input輸入進(jìn)行格式化詳解

    Angular.js組件之input mask對input輸入進(jìn)行格式化詳解

    這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對input輸入進(jìn)行格式化的相關(guān)內(nèi)容,文中通過示例代碼詳細(xì)介紹了將銀行卡號和日期的方法,需要的朋友們可以參考借鑒,下面來一起看看吧。
    2017-07-07

最新評論