輕鬆Angularjs實現表格按指定列排序

標籤：size   control   line   簡單   derby   under   $scope   ati   .json   

　　angular表格點擊序號進行升序，再次點擊進行降序排序，在輸入框輸入資訊，出現相對應資料的那一行。

 

　html:

 

<input type="text" ng-model="search"/><table border="1" cellpadding="0" cellspacing="1" width="400px">    <tr>        <th ng-click="click()">編號</th>        <th ng-click="click1()">姓名</th>        <th ng-click="click2()">年齡</th>    </tr>    <tr ng-repeat="item in data|orderBy:a+b+c|filter:search">        <td>{{item.number}}</td>        <td>{{item.name}}</td>        <td>{{item.age}}</td>    </tr></table>

 

js:

 

var app=angular.module(‘mk‘,[]);        app.controller(‘test‘,function($scope,$http){                $http.get(‘json.json‘).success(function(data){                    $scope.data=data.nr                });            $scope.a=‘number‘;            $scope.b=‘name‘;            $scope.c=‘age‘;            $scope.click=function(){                if($scope.a==‘number‘){                    $scope.a=‘-number‘;                    $scope.b=‘‘;                    $scope.c=‘‘;                }else{                    $scope.a=‘number‘;                    $scope.b=‘‘;                    $scope.c=‘‘;                }            };            $scope.click1=function(){                if($scope.b==‘name‘){                    $scope.a=‘‘;                    $scope.b=‘-name‘;                    $scope.c=‘‘;                }else{                    $scope.a=‘‘;                    $scope.b=‘name‘;                    $scope.c=‘‘;                }            };            $scope.click2=function(){                if($scope.c==‘age‘){                    $scope.a=‘‘;                    $scope.b=‘‘;                    $scope.c=‘-age‘;                }else{                    $scope.a=‘‘;                    $scope.b=‘‘;                    $scope.c=‘age‘;                }            }        })

此方法還需引用json檔案：

{  "nr":[    {"number":34,"name":"Angular","age":24},    {"number":24,"name":"Blue","age":25},    {"number":14,"name":"Fertn","age":23},    {"number":43,"name":"Onfer","age":26},    {"number":36,"name":"Wang","age":21},    {"number":31,"name":"Linla","age":30},    {"number":4,"name":"San","age":28},    {"number":6,"name":"Ring","age":22},    {"number":76,"name":"Cone","age":31},    {"number":32,"name":"Perter","age":32},    {"number":32,"name":"Nert","age":27},    {"number":15,"name":"Ding","age":29}  ]}

 

 

我是用過濾器 orderBy:‘id‘:a+b+c來控制排序是升序還是降序，在點擊時通過判斷他們的來實現我們想要的效果。

你們還有什麼簡單方法麼，拿出來分享一下吧！ 

 

輕鬆Angularjs實現表格按指定列排序