1. 程式人生 > >輕松Angularjs實現表格按指定列排序

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

filter click arc 我們 點擊 ont 想要 log ner

  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實現表格按指定列排序