zoukankan      html  css  js  c++  java
  • 轻松Angularjs实现表格按指定列排序

      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来控制排序是升序还是降序,在点击时通过判断他们的来实现我们想要的效果。

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

  • 相关阅读:
    【转】PHP foreach 小结
    【转】div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em用法
    【转】网页制作中的CSS+DIV:dl,dt,dd分别表示什么意思啊?请说明啊,谢谢有什么功能?
    【转】[教程] CSS入门3:如何插入CSS样式
    PHP输出多个空格
    【转】浅谈HTTP中Get与Post的区别
    HDOJ 2433 Counter Strike 逆序对 线段树
    hdu 4193 Nonnegative Partial Sums 单调队列
    vijos 1750 建房子 单调队列
    poj 2155 Matrix 二维树状数组
  • 原文地址:https://www.cnblogs.com/yhyanjin/p/7045956.html
Copyright © 2011-2022 走看看