用逗号分隔的 ngTable 过滤器答案

【问题标题】：ngTable filter with comma separated用逗号分隔的 ngTable 过滤器
【发布时间】：2015-01-06 10:07:56
【问题描述】：

我在 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>

【问题讨论】：

标签： javascript angularjs filtering ngtable

【解决方案1】：

根据angularjsdocumentation，除了字符串表达式，我们还可以传递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);
    }

【讨论】：

如果他们在,后面放了空格我们怎么处理
只需调用trim() 到filterKeys。请参阅上面更新的答案并检查更新的 jsFiddle jsfiddle.net/ykktuo33/2
还有一个问题....因为我正在使用 jshint .....我得到 [L63:C30] W089: for in 的主体应该包含在 if 语句中从原型中删除不需要的属性。 for (var key in filterKeys) {
嗨，Alex，我认为这是 jslint 警告。我相信在功能方面没有问题。您可以根据此 stackoverflow 线程相应地更新代码。 stackoverflow.com/questions/1963102/…
好吧，我已经重新喜欢了……再问一个问题……这个过滤器是否区分大小写，....我想是的……现在让它不区分大小写跨度>