AngularJSでフィルタ内のパラメータを使用するには?
2023-09-09 14:37:50
質問
ng-repeatで配列を繰り返し処理する際に、フィルタのパラメータを使用したい。
例
HTML-パート。
<tr ng-repeat="user in users | filter:isActive">
JavaScriptの部分です。
$scope.isActive = function(user) {
return user.active === "1";
};
のようなフィルタが使えるようにしたい。
<tr ng-repeat="user in users | filter:isStatus('4')">
しかし、それは動作しません。どうすればいいのでしょうか?
どのように解決するのですか?
UPDATEしてください。 ドキュメントをよく見ていなかったのだと思いますが、確かに フィルタ をこの構文で使うことができます ( このフィドル を参照) を使って、オブジェクトのプロパティでフィルタリングすることができます。
<tr ng-repeat="user in users | filter:{status:4}">
これが誰かの助けになればと思い、私のオリジナルの回答です。
を使用して フィルタ フィルタを使う場合、パラメータを渡すことはできませんが、少なくとも2つのことができます。
1) スコープ変数にフィルタリングしたいデータをセットし、フィルタリング関数でそれを参照する。 このフィドル .
JavaScriptを使用しています。
$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
{name: 'second user', status: 2},
{name: 'third user', status: 3}];
$scope.isStatus = function(user){
return (user.status == $scope.status);
};
Htmlです。
<li ng-repeat="user in users | filter:isStatus">
または
2) 新しいフィルタを作成し、パラメータに このフィドル .
JavaScriptを使用しています。
var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
return function(input, status) {
var out = [];
for (var i = 0; i < input.length; i++){
if(input[i].status == status)
out.push(input[i]);
}
return out;
};
});
Htmlです。
<li ng-repeat="user in users | isStatus:3">
このフィルタは
status
プロパティがあることを想定しています。次のように読むことができます。
この
を参照してください。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] コールバック内で正しい `this` にアクセスする方法
-
[解決済み] JavaScriptの正規表現でマッチしたグループにアクセスするにはどうすればよいですか?
-
[解決済み] オブジェクトの配列を属性に基づいてフィルタリングする方法は?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】複数の引数でAngular.jsのフィルタを呼び出すには?
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?