Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了ngTable自定义/重写过滤器大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<script type="text/ng-template" id="/filter/js/startDateFilter.html"> <input type="text"> </script>
$scope.customFilter = {
            start:{
                id:'/filter/js/startDateFilter.html',placeholder:'Start'
            }
        }
  • 需要在NgTable的配置中指定过滤器
$scope.userTable = new NgTableParams({},{
                // initial sort order
                filterDelay: 0,filterOptions: {filterFn: $scope.customFilterFn},dataset: data
            });
  • 为指定列设置控件
<td data-title="'日期'" filter="customFilter"> {{user.date|date:'yyyy-MM-dd'}} </td>
$scope.customFilterFn = function (date,filterValues) {
 return data.filter(function (item) {
                var result = true;
                if (typeof(filterValues.name) != undefined && filterValues.name != null) {
                    result = result && (item.name.indenOf(filterValues.name) > -1);
                }

                if (typeof(filterValues.seX) != undefined && filterValues.sex != null) {
                    result = result && (item.sex == filterValues.seX);
                }

                if (typeof(filterValues.startDatE) != undefined && filterValues.startDate != null) {
                    result = result && (item.startDate >= filterValues.startDatE);
                }
 return result;
            })
        }
<!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <Meta charset="UTF-8"> <title>自定义过滤器</title> </head> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/ng-table/1.0.0/ng-table.min.css" rel="stylesheet"> <body> <div class="row"> <!--自定义filter控件--> <script type="text/ng-template" id="dateFilter.html"> <input type="date"> </script> <div class="col-md-12 table-responsive"> <table ng-table="userTable" class="table table-condensed table-bordered table-Striped table-hover " show-filter="true"> <tr ng-repeat="user in $data"> <td data-title="'用户名'" filter="{username: 'text'}" sortable="'username'">{{user.username}}</td> <td data-title="'性别'" filter="{sex: 'SELEct'}" filter-data="sexs" sortable="'sex'">{{user.sex}}</td> <td data-title="'性别'" filter="customFilter" sortable="'date'"> {{user.date|date:'yyyy-MM-dd'}} </td> </tr> </table> </div> </div> </body> <script type="text/ng-template" id="/filter/js/startDateFilter.html"> <input type="text"> </script> <script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> <script src="https://cdn.bootcss.com/ng-table/1.0.0/ng-table.min.js"></script> <script type="text/javascript"> var app = angular.module('myApp',['ngTable']); app.controller('myCtrl',function ($scope,NgTableParams) { $scope.sexs = [{ "id": "男","title": "男" },{ "id": "女","title": "女" }] var data = [{ "username": "农夫山泉","sex": "男","date": 1004570428580 },{ "username": "哇哈哈","sex": "女","date": 1784570428580 },{ "username": "Alice","date": 1466570428580 },{ "username": "CCC","date": 1584570428580 }]; $scope.userTable = new NgTableParams({ sorTing: {id: "asc"} },{ // initial sort order filterDelay: 0,filterOptions: {filterFn: $scope.customFilterFn},dataset: data }); $scope.customFilter = { start:{ id:'/filter/js/startDateFilter.html',placeholder:'Start' } } $scope.customFilterFn = function (date,filterValues) { return data.filter(function (item) { var result = true; console.log(filterValues); if (typeof(filterValues.Name) != undefined && filterValues.name != null) { result = result && (item.name.indenOf(filterValues.Name) > -1); } if (typeof(filterValues.seX) != undefined && filterValues.sex != null) { result = result && (item.sex == filterValues.seX); } if (typeof(filterValues.startDatE) != undefined && filterValues.startDate != null) { result = result && (item.startDate >= filterValues.startDatE); } return result; }) } }) </script> </html>

大佬总结

以上是大佬教程为你收集整理的ngTable自定义/重写过滤器全部内容,希望文章能够帮你解决ngTable自定义/重写过滤器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。