javascript - 用逗号分隔的 ngTable 过滤器

标签 javascript angularjs filtering ngtable

我用 ngTable 在 AngularJs 中创建了一个应用程序,该表具有过滤器和排序功能,该应用程序工作正常,但过滤和排序也工作正常,但问题是我需要过滤逗号分隔的指定列如下所示

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 documentation ,除了字符串表达式,我们还可以为过滤器参数传递函数。您可以使用自定义过滤器功能实现要求。该函数必须根据给定的逗号分隔字符串过滤列表。

或多或少地改变你的 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);
    }

关于javascript - 用逗号分隔的 ngTable 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26838131/

相关文章:

javascript - 奇怪的 ng-model 行为(ng-model 映射到数组元素)

angularjs - laravel 请求未定义

php - 基于多个复选框状态构建 SQL 查询

recursion - 如何使用pykalman filter_update 进行在线回归

javascript - 我希望当文本区域内没有写入任何内容时禁用文本框

javascript - NgResource 调用请求 map

javascript - 删除 d3.js 面积图中沿轴的轮廓

javascript - Webpack 报错 : configuration. module.rules[0] has an unknown property 'query'

javascript - 无法让 array.splice 在 Angular 中工作

c# - 过滤字符串