ng-repeatで0件の時にメッセージを表示する

Angular.jsのng-repeatで0件の時にメッセージを表示する方法をメモ。

サンプルコード

ng-repeatでフィルター後の件数を取得する方法に手間取りましたが、フィルタリングしたデータをng-repeatで使用すればいいようです。

HTML

<div ng-controller="ctrl">
	<input type="text" ng-model="search" placeholder="検索" />
	<ul>
		<li ng-repeat="d in filteringData = (data | filter:search)">{{d.name}} ({{d.age}})</li>
	</ul>
	<p>件数:{{filteringData.length}}</p>
	<p ng-show="filteringData.length <= 0">データがありません。</p>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
	$scope.data= [
		{
			"name": "suzuki",
			"age": 18
		}, {
			"name": "satoh",
			"age": 24
		}, {
			"name": "tanaka",
			"age": 23
		}, {
			"name": "takahashi",
			"age": 16
		}
	];
});

ng-repeatが0件の時にメッセージが出るようになりました。
ng-repeatで0件の時にメッセージを表示するデモページ
　

【参考サイト】

• javascript – How to display length of filtered ng-repeat data – Stack Overflow