[解決済み] AngularJS - フィルタの結果が空だった場合のプレースホルダ
2023-02-01 08:50:48
質問
プレースホルダーをつけたいのですが、例えば
<No result>
というプレースホルダーをつけたいのですが、フィルタリングの結果が空になったときに どなたか助けていただけませんか?私はどこから始めればいいのかさえわかりません...。
HTML :
<div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
<li ng-repeat="foo in foos">
<a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
</li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
<li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>
</div>
JS :
function Ctrl($scope) {
$scope.foos = [{
name: 'Foo 1'
},{
name: 'Foo 2'
},{
name: 'Foo 3'
}];
$scope.bars = [{
name: 'Bar 1',
foo: 'Foo 1'
},{
name: 'Bar 2',
foo: 'Foo 2'
}];
$scope.setBarFilter = function(foo_name) {
$scope.barFilter = {};
$scope.barFilter.foo = foo_name;
}
}
jsFiddle : http://jsfiddle.net/adrn/PEumV/1/
ありがとうございます。
どのように解決するのですか?
フィルタを一度だけ指定するアプローチに手を加えたものです。
<li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
</ul>
<p ng-hide="filteredBars.length">Nothing here!</p>
関連
-
[解決済み] AngularJSのng-repeatは、空のリストのケースを処理します。
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] Javascriptで配列から空の要素を削除する
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] AngularJSとjQueryの違いについて
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?