轻松Angularjs实现表格按指定列排序

　　angular表格点击序号进行升序，再次点击进行降序排序，在输入框输入信息，出现相对应数据的那一行。

　html:

<input type="text" ng-model="search"/>

<table border="" cellpadding="" cellspacing="" 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":,"name":"Angular","age":},

    {"number":,"name":"Blue","age":},

    {"number":,"name":"Fertn","age":},

    {"number":,"name":"Onfer","age":},

    {"number":,"name":"Wang","age":},

    {"number":,"name":"Linla","age":},

    {"number":,"name":"San","age":},

    {"number":,"name":"Ring","age":},

    {"number":,"name":"Cone","age":},

    {"number":,"name":"Perter","age":},

    {"number":,"name":"Nert","age":},

    {"number":,"name":"Ding","age":}

  ]

}

我是用过滤器 orderBy:'id':a+b+c来控制排序是升序还是降序，在点击时通过判断他们的来实现我们想要的效果。

你们还有什么简单方法么，拿出来分享一下吧！

巴特西

轻松Angularjs实现表格按指定列排序

angular表格点击序号进行升序，再次点击进行降序排序，在输入框输入信息，出现相对应数据的那一行。

最新文章

热门文章