[解決済み] AngularJSで複数の特定モデルプロパティによるフィルタリング(OR関係)。
質問
こちらの例を見てください。 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
を入力に追加して、新しい検索変更を監視するのです。
を入力し、フィルタリング機能を起動します。
関連
-
[解決済み] ng-repeat内で$indexを使用して、クラスを有効にしてDIVを表示するにはどうすればよいですか?
-
[解決済み] AngularJS の ng-disabled ディレクティブに式を指定しても動作しない
-
[解決済み] angularjsで$compileを操作する
-
[解決済み] AngularJSのリソースプロミス
-
angularjsのルーティングについて $stateと$stateParamsの話
-
angularでのng-repeatとtrack by
-
[解決済み] Ui-srefがクリッカブルリンクを生成しない/動作しない
-
[解決済み] ng-classを使った複数クラスの追加
-
[解決済み] ng-modelとng-bindの違いは何ですか?
-
[解決済み] AngularJSで双方向のフィルタリングを行うには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] `ui-router` $stateParams vs. $state.params
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] AngularJSでkeypressイベントを使用するには?
-
[解決済み] 新しい/分離されたスコープを求める複数のディレクティブ [ngController, ...] がある。
-
[解決済み] どのように$state.goにパラメータを追加しますか?
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] 入力フィールドにフォーカスを当てるには?
-
[解決済み] コントローラでフィルタを使用するには?
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] angularJSで複数の値をフィルタリングする方法(OR演算)