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

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

  • 相关阅读:
    07.15 first与first-child的区别
    7.15 css与js 选择奇偶子元素的区别
    7.15过有意思的生活
    7.14养成健身习惯
    8080端口被占用
    Vue自定义指令和认识钩子函数
    按键修饰符
    Vue 的过滤器
    列表渲染
    在Vue中使用.class样式
  • 原文地址:https://www.cnblogs.com/yhyanjin/p/7045956.html
Copyright © 2020-2023  润新知