码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-06-19 00:29:01      阅读:607      评论:0      收藏:0      [点我收藏+]

标签: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实现表格按指定列排序

标签:size   control   line   简单   derby   under   $scope   ati   .json   

原文地址:http://www.cnblogs.com/yhyanjin/p/7045956.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!