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

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

  • 相关阅读:
    stm32keilIDE遇到的bug
    linux输入子系统
    按键消抖
    字符驱动程序之——同步互斥阻塞
    字符驱动程序之——异步通知
    字符驱动程序之——poll机制
    第一个驱动之字符设备驱动(四)按键中断
    第一个驱动之字符设备驱动(三)按键查询
    第一个驱动之字符设备驱动(二)mdev
    三者互ping,PC,虚拟机,uboot,nfs网络文件系统搭建
  • 原文地址:https://www.cnblogs.com/yhyanjin/p/7045956.html
Copyright © 2011-2022 走看看