AngularJS輕松實(shí)現(xiàn)雙擊排序的功能
話不多說,直接看示例代碼
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能有所幫助。
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)
- Angularjs添加排序查詢功能的實(shí)例代碼
- mongoDB 多重?cái)?shù)組查詢(AngularJS綁定顯示 nodejs)
- Angularjs分頁查詢的實(shí)現(xiàn)
- AngularJS 過濾與排序詳解及實(shí)例代碼
- AngularJS ng-table插件設(shè)置排序
- angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表
- 妙用Angularjs實(shí)現(xiàn)表格按指定列排序
- Angular排序?qū)嵗斀?/a>
- angular過濾器實(shí)現(xiàn)排序功能
- Angularjs使用過濾器完成排序功能
- Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能示例
相關(guān)文章
使用angular-cli webpack創(chuàng)建多個(gè)包的方法
這篇文章主要介紹了使用angular-cli webpack創(chuàng)建多個(gè)包的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10angular 基于ng-messages的表單驗(yàn)證實(shí)例
本篇文章主要介紹了angular 基于ng-messages的表單驗(yàn)證實(shí)例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法
下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02angular4應(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)建, 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05AngularJS實(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-12Angular.js組件之input mask對input輸入進(jìn)行格式化詳解
這篇文章主要給大家介紹了關(guān)于Angular.js組件之input mask對input輸入進(jìn)行格式化的相關(guān)內(nèi)容,文中通過示例代碼詳細(xì)介紹了將銀行卡號和日期的方法,需要的朋友們可以參考借鑒,下面來一起看看吧。2017-07-07