[解決済み] カスタムフィルター機能によるAngularJSのマルチフィルター
2023-02-09 04:26:38
質問
複数のフィルタ+カスタムフィルタ関数でリストをフィルタリングしようとしています。
オリジナルの動作するjsfiddleの例は http://jsfiddle.net/ed9A2/1/ ですが、私は年齢がフィルタリングされる方法を変更したいのです。
私はカスタムフィルタを追加したいです。 年齢 という2つの入力値に基づいてフィルタリングします。 最小年齢 と max_age と、(年齢の間に).
doc.を調べた結果、同じような質問をしている人がいることがわかりました。私は同じような質問をしている人々と、ユーザーであるMark Rajcokの答えを見つけました。 http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 は良いように見えるし、動作しているはずです。 しかし、私は私のコードにそれを適用する問題を抱えている、私は他の複数のフィルタを持っているので、主に思われる。
私はAngularJSに非常に新しいです :(
私の試行錯誤の結果、うまくいかなかったものはこちらです。 http://jsfiddle.net/ed9A2/20/
動作していないコードのコピーペーストはこちらです。
表示
<div ng-app ng-controller="MainController">
<table class="fancyTable">
<tr>
<th>Player id</th>
<th>Player name</th>
<th>Age</th>
</tr>
<tr>
<td><input ng-model="player_id" /></td>
<td><input ng-model="player_name" /></td>
<td>
Min Age:<input ng-model="min_age" />
Max Age:<input ng-model="max_age" />
</td>
</tr>
<tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}">
<td>{{player.id}}</td>
<td>{{player.name}}</td>
<td>{{player.age}}</td>
</tr>
</table>
コントローラ
function MainController($scope) {
$scope.player_id = "";
$scope.player_name = "";
$scope.player_age = "";
$scope.min_age = 0;
$scope.max_age = 999999999;
$scope.ageFilter = function(player) {
return ( player > $scope.min_age && player.age < $scope.max_age);
}
$scope.players = [
{"name": "Rod Laver",
"id": "rod",
"date": "1938/8/9",
"imageUrl": "img/rod-laver.gif",
"age": 75},
{"name": "Boris Becker",
"id": "borix",
"date": "1967/11/22",
"imageUrl": "img/boris-becker.gif",
"age": 45},
{"name": "John McEnroe",
"id": "mcenroe",
"date": "1959/2/16",
"imageUrl": "img/john-mc-enroe.gif",
"age": 54},
{"name": "Rafa Nadal",
"id": "nadal",
"date": "1986/5/24",
"imageUrl": "img/ndl.jpg",
"age": 27}
]
}
どのように解決するのですか?
これを試してみてください。
<tr ng-repeat="player in players | filter:{id: player_id, name:player_name} | filter:ageFilter">
$scope.ageFilter = function (player) {
return (player.age > $scope.min_age && player.age < $scope.max_age);
}
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)