2017-05-09 122 views
0

我正在創建一個具有顯示大量項目的表的儀表板。它目前有一個簡單的搜索功能,允許我使用ng-model="projectSearch"搜索與該單詞匹配的所有內容。這ng模型是自己插入我的ng-repeat="project in projects.data | filter : projectSearch"AngularJS - 與多個關鍵字匹配的搜索結果

我現在要實現的是一個搜索功能,顯示所有匹配一個,兩個或任何數量的關鍵字。我通常會發現有關顯示匹配「關鍵字a」「關鍵字b」的搜索功能的問題。

我想要搜索與'關鍵字a'匹配的所有項目'關鍵字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... 
} 

我可以實現通過一個過濾器解決我的問題?

+0

你可以給你一個工作的小提琴嗎? –

+0

@AmadouBeye我的搜索欄目前像任何常規搜索欄一樣工作,例如:http://jsfiddle.net/mikeeconroy/QL28C/1/ – Lesleyvdp

回答

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="project in projects.data | myfilter:types" 

讓我知道它是否工作。