ng逗号筛选器以逗号分隔

时间:2014-11-10 06:40:09

标签: 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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

根据angularjs documentation,除了字符串表达式,我们还可以为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);
    }