角型JSカスタムフィルター

Question

まず、少しの背景。基本的には、ng-repeatを使用してテーブル内のオブジェクトのリストをレンダリングしています。私のフィルタは、検索文字列を取り、繰り返されているオブジェクト内の各検索タームをチェックできる必要があります。検索用語のそれぞれは、フィルタがそのオブジェクトを通過させるために、オブジェクトプロパティのいずれかに（任意の順序で）存在する必要があります。

{ 
    customer: 'John Smith', 
    detail: 'Some details' 
} 

をそして、私の検索テキストはsmith johnまたはdetails john smithまたはsmith john detailsが、それは任意の順序で、これらの用語を取り、一致するオブジェクトを見つけることができるようにする必要があります。例えば、オブジェクトは、次のようになります。すべての検索語が存在するため、上記のオブジェクトが一致する必要があります。

私が書いたフィルタは以下の通りです：

結果

<tr ng-repeat="asset in $ctrl.assets | assetsearch:$ctrl.filters.search" ng-if="!asset.loading"> 

：$ctrlは、テンプレートのコンポーネントコントローラを指し

angular.module('app').filter('assetsearch', function() { 
return function (input, searchString) { 

    var searchTerms = searchString === '' ? [] : searchString.replace(/ +/g, ' ').replace(/[^\w\s]|_/g, '').toLowerCase().split(' '); 

    var matches = _.filter(input, function (asset) { 
     var textToSearch = [ 
      asset.customer, 
      asset.details 
     ]; 

     textToSearch = textToSearch.join(' ').replace(/ +/g, ' ').replace(/[^\w\s]|_/g, "").toLowerCase(); 

     var match = true; 
     _.each(searchTerms, function (term) { 
      match = (textToSearch.trim().indexOf(term) > -1) && match; 
     }); 

     return match; 
    }); 

    return matches; 
} 
}); 

マイテンプレートコードは、かなり標準に見えます

「John Smith」、「John」または「Smith」を検索すると機能します。逆にすると機能しませんe string ...文字列が 'Smith John'に反転されたり 'Joh Smith'に変更された場合、フィルタはまったくトリガされていないように見えます（この場合、フィルタの機能の先頭のコンソールログは実行されません、それは何もしていないようです）。

Answer 1

アンダースコアの使用を避け、のようなメソッドを使用すると、angularjsを使用してforEachループをネストした方が簡単になります。次のようにフィルタを書き換えることになります。

app.filter('assetsearch', function() { 
    return function(input, term) { 
    var obj = {}; 
    if (typeof term !== 'undefined') { 
     angular.forEach(input, function(v, i){ 
     var terms = term.split(" "); 
     angular.forEach(terms, function(v2, i2){ 
      if(v.toLowerCase().indexOf(v2.toLowerCase()) !== -1){ 
      obj[i] = v; 
      } 
     }); 
     }); 
    } else { 
     return input; 
    } 
    return obj; 
    }; 
}); 

私もそれが実環境でどのように動作するかを示すためにPlunkerを作成しました。