1. ホーム
  2. angularjs

[解決済み] AngularJSで複数の特定モデルプロパティによるフィルタリング(OR関係)。

2022-10-14 14:08:44

質問

こちらの例を見てください。 http://docs.angularjs.org/api/ng.filter:filter

電話のプロパティのいずれかを使って検索するには <input ng-model="search"> で、名前だけで検索する場合は <input ng-model="search.name"> を使用すると、結果は名前によって適切にフィルタリングされます (電話番号を入力しても、予想通り結果は返されません)。

例えば、"name" プロパティと "phone" プロパティと "secret" プロパティを持つモデルがあるとすると、どのようにすれば というプロパティと ではなく プロパティは? つまり、要するに、ユーザーが名前や電話番号を入力して ng-repeat は正しくフィルタリングされますが、ユーザーが "secret" 値の一部と等しい値を入力したとしても、何も返さないということです。

ありがとうございます。

どのように解決するのですか?

ここでは プランカー

新しいプランカーは、よりすっきりしたコードで、クエリと検索リストの項目は両方とも大文字と小文字が区別されません。

主なアイデアは、この目的を達成するためにフィルタ関数を作成することです。

由来 公式ドキュメント

<ブロッククオート

関数があります。述語関数は、任意のフィルタを記述するために使用することができます。 この関数は、配列の各要素に対して呼び出されます。最終的な結果は 最終結果は、述語が真を返した要素の配列です。

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 

$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

更新

実世界でのパフォーマンスについて懸念する人がいるかもしれませんが、それは正しいです。

現実世界では、このようなフィルタリングはコントローラから行うことになるでしょう。

以下はその詳細です。 ポスト を表示します。

を追加します。 ng-change を入力に追加して、新しい検索変更を監視するのです。

を入力し、フィルタリング機能を起動します。