2017-05-09 13 views
0

私は大量のプロジェクトを表示するテーブルを持つダッシュボードを作成しています。現在、私はその単語に一致するすべてのものを検索できる簡単な検索機能を持っています。ng-model="projectSearch"を使用しています。このngモデルはそれ自身の中に組み込まれていますng-repeat="project in projects.data | filter : projectSearch"AngularJS - 複数のキーワードに一致する検索結果

ここで実装したいのは、1つ、2つ、またはすべてのキーワードに一致するすべてのものを表示する検索機能です。私は一般的に一致する 'キーワード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

次を使用してワイルドカード検索を行うことができます。

としてNGリピートであなたのcontroller-

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

$scope.types = {value: pattern}; 

に次のカスタムフィルタ -

.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; 
    }; 
}); 

使用を作成します。

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

それが動作するかどうか教えてください。

関連する問題