ng以逗号分隔的表格筛选器

ngTable filter with comma separated

本文关键字：表格筛选分隔 ng 更新时间：2023-09-26

我在AngularJs中用ngTable创建了一个应用程序，该表具有过滤和排序功能，该应用程序运行良好，但过滤和排序也运行良好，但是问题是我需要用逗号分隔来过滤指定列，如下图所示

scientist,doctor

现在它将根据单一值进行过滤

JSFiddle

有人能告诉我这个的解决方案吗

var app = angular.module('app', ['ngTable']);
app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
     $scope.peoples = [{
        "id": 145,
            "desig": "doctor",
            "name": "Manu",
            "place": "ABCD",
            "group": "ime123"
    }, {
        "id": 148,
            "desig": "engineer",
            "name": "John",
            "place": "POLK",
            "group": "ime148"
    }, {
        "id": 150,
            "desig": "scientist",
            "name": "Mary",
            "place": "USE",
            "group": "ime148"
    }];
    $scope.peoplesCopy = $scope.peoples;
    $scope.mytable = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'desc'
        }
        
    }, {
        getData: function ($defer, params) {
           $scope.peoples = angular.copy($scope.peoplesCopy);
           var filteredData = $filter('filter')($scope.peoples, params.filter());
             $scope.peoples = $filter('orderBy')(filteredData, params.orderBy());
             $defer.resolve($scope.peoples);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<body ng-app="app">
<div ng-controller="IndexCtrl">
    <table border="1" ng-table="mytable" show-filter="true">
            <tr ng-repeat="people in $data">
                <td sortable="id" data-title="'Id'">{{people.id}}</td>
                <td sortable="desig" filter="{ 'desig': 'text' }" data-title="'Desig'">{{people.desig}}</td>
                <td sortable="name" data-title="'Name'">{{people.name}}</td>
                <td sortable="place" data-title="'Place'">{{people.place}}</td>
            </tr>
    </table>
</div>
</body>

根据angularjs文档，除了字符串表达式之外，我们还可以为filter参数传递函数。您可以使用自定义过滤器功能来实现要求。函数必须根据给定的逗号分隔字符串筛选列表。

使用以下内容或多或少地更改您的getData方法。更新后的jsfiddle在这里：http://jsfiddle.net/ykktuo33/3/

getData: function ($defer, params) {
       $scope.peoples = angular.copy($scope.peoplesCopy);
       var filteredData = $filter('filter')($scope.peoples,
        // This is the custom filter function
        function(val,idx){
           // entered filter in column
           var filt = params.filter();
           if(filt && filt.desig) {
               var searchfilter = filt.desig;
               // split multiple filter comma separated
               var filterKeys = searchfilter.split(',');
               if(filterKeys) {
                   var ret = false;
                   // iterate multiple entered filter and return true for match
                   for(var key in filterKeys) {
                       var listVal = val.desig;
                       // call trim to remove whitespace between search filter keys
                       ret = (listVal.indexOf(filterKeys[key].trim())) > -1 || ret;
                   }
                   return ret;
               }  
           }
           return true;
  });
         $scope.peoples = $filter('orderBy')(filteredData, params.orderBy());
         $defer.resolve($scope.peoples);
    }