angularjs中的排序和過濾

時間 2019-12-13

原文原文鏈接

頁面效果：spa

說明：1.在輸入框中輸入姓名或年齡，能夠對錶格內的數據作過濾code

　　 2.點擊姓名，能夠對姓名字段作排序。排序方式可逆轉。blog

3.點擊年齡，能夠對年齡字段作排序。排序方式可逆轉。排序

代碼實現：ip

<script>
    angular.module('myApp',[])
    .controller('Aaa',['$scope','$filter',function($scope,$filter){
    var oriArr = [
        { name : "red" , age : "20" },
        { name : "yellow" , age : "40" },
        { name : "blue" , age : "30" },
        { name : "green" , age : "10" }
    ];
    $scope.dataList = oriArr;
    $scope.fnSort = function(arg){
        arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg];
        $scope.dataList = $filter('orderBy')($scope.dataList , arg , arguments.callee['fnSort'+arg] );
        
    };
    $scope.fnFilter = function(){
            $scope.dataList = $filter('filter')( oriArr , $scope.filterVal );
    };
}]);
</script>
</head>
<body>
    <div ng-controller="Aaa">
    <input type="text" ng-model="filterVal"><input type="button" ng-click="fnFilter()" value="搜索">
    <table border="1">
            <tr>
            <th ng-click="fnSort('name')">姓名</th>
                <th ng-click="fnSort('age')">年齡</th>
            </tr>
            <tr ng-repeat="data in dataList">
            　　 <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
            </tr>
        </table>
    </div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。