AngularJS - 匹配多个关键字的搜索结果

时间:2017-05-09 10:59:18

标签: html angularjs

我正在创建一个仪表板,其中有一个显示大量项目的表。它目前有一个简单的搜索功能,允许我使用ng-model="projectSearch"搜索与该单词匹配的所有内容。此ng模型已单独插入我的ng-repeat="project in projects.data | filter : projectSearch"

我现在想要实现的是一个搜索功能,它显示匹配一个,两个或任意数量的关键字的所有内容。我一般发现有关搜索功能显示匹配'关键字a' OR '关键字b'的问题。

我想搜索与'关键字a' AND '关键字b'等匹配的所有项目,例如以空格或逗号分隔。

我的表包含几个字段:

<thead>
    <tr md-row style="background-color:rgba(40,53,147,0.5)">
            <th md-column md-order-by="title"><span>Project Name</span></th>
            <th md-column>ID</th>
            <th md-column md-numeric md-order-by="total_cpi[total_cpi.length-1].cpi">
                <span>Status</span></th>
            <th md-column md-numeric md-order-by="phase"><span>Phase</span></th>
            <th md-column md-numeric md-order-by="budget_indication">
                <span>Budget</span></th>
            <th md-column md-numeric md-order-by="users[0].user_name"><span>Project Manager</span>
            </th>
            <th md-column md-numeric md-order-by="start_date"><span>Start Date</span>
            </th>
            <th md-column md-numeric><span>End Date</span></th>
        </tr>
</thead>

我的项目对象如下:

{
    "id" : 1,
    "project_nr" : 1,
    "title" : "x",
    "start_date_formatted" : "01/01/2016",
    "phase" : "x",
    etc...
}

我可以通过过滤器解决我的问题吗?

1 个答案:

答案 0 :(得分:0)

您可以使用以下命令进行通配符搜索:

创建自定义过滤器 -

.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];

    angular.forEach(items, function(item) {
       if(types.wildcard == false || item.name.match(types.value)) {
          filtered.push(item);
        }

    });

    return filtered;
  };
});

在控制器中使用以下内容 -

$scope.projectSearch = "";
var pattern;
    $scope.$watch('projectSearch', function() {
     var pattern = '/^'+ $scope.projectSearch +'*$/'
    });

$scope.types = {value: pattern};

使用ng-repeat作为

ng-repeat="project in projects.data | myfilter:types"

让我知道它是否有效。