Angular JS-如果ng-repeat为空则显示消息
发布于 2021-02-01 10:10:02
以下AngularJS应用程序正在使用ng-repeat和已应用的过滤器。某个应用的过滤器不会留下任何值。如何显示通知?
的HTML
<div >
<div data-ng-controller="myCtrl">
<ul >
<li data-ng-repeat="item in values | filter:filterIds()">
<code>#{{item.id}}</code> Item
</li>
</ul>
<p ng-show="!values.length">no vals with this filter</p>
<button ng-click="loadNewFilter()"> filter now</button>
</div>
</div>
AngularJS
var app = angular.module('m', []);
app.controller('myCtrl', function ($scope) {
$scope.values = [{
id: 1
}, ....
}];
$scope.filter = [1,2,3,4,5,6];
$scope.filterIds = function (ids) {
return function (item) {
var filter = $scope.filter;
return filter.indexOf(item.id) !== -1;
}
}
$scope.loadNewFilter = function (){
$scope.filter = [-1];
$scope.$apply();
}
});
关注者
0
被浏览
58
1 个回答
-
我认为这是您想要的:
var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.values = [ {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}, {id: 6}]; $scope.filter = [1,2,3,4,5,6]; $scope.filterIds = function (ids) { return function (item) { var filter = $scope.filter; return filter.indexOf(item.id) !== -1; } } $scope.loadNewFilter = function (){ $scope.filter = [1,5]; } }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div data-ng-controller="myCtrl"> <ul> <li data-ng-repeat="item in testValue=(values | filter:filterIds())"> <code>#{{item.id}}</code> Item </li> </ul> <p ng-show="!testValue.length">no vals with this filter</p> <button ng-click="loadNewFilter()"> filter now</button> </div> </div>