Angular js - 如果 ng-repeat 为空则显示消息 [英] Angular js - Show message if ng-repeat is empty

问题描述

以下 AngularJS 应用程序使用 ng-repeat 和应用的过滤器.某个应用的过滤器没有留下任何值.如何显示通知?

js小提琴

HTML

<div data-ng-controller="myCtrl"><ul ><li data-ng-repeat="值中的项目 | filter:filterIds()"><code>#{{item.id}}</code>物品<p ng-show="!values.length">此过滤器没有 vals</p><button ng-click="loadNewFilter()">立即过滤</button>

AngularJS

var app = angular.module('m', []);app.controller('myCtrl', function ($scope) {$scope.values = [{编号:1}, ....}];$scope.filter = [1,2,3,4,5,6];$scope.filterIds = 函数(ID){返回函数(项目){var filter = $scope.filter;返回 filter.indexOf(item.id) !== -1;}}$scope.loadNewFilter = 函数 (){$scope.filter = [-1];$scope.$apply();}});

解决方案

我想这就是你想要的:

var app = angular.module('myApp', []);app.controller('myCtrl', function ($scope) {$scope.values = [{id: 1},{id: 2},{id: 3},{id: 4},{编号:5}，{id: 6}];$scope.filter = [1,2,3,4,5,6];$scope.filterIds = 函数(ID){返回函数(项目){var filter = $scope.filter;返回 filter.indexOf(item.id) !== -1;}}$scope.loadNewFilter = 函数 (){$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>物品<p ng-show="!testValue.length">此过滤器没有 vals</p><button ng-click="loadNewFilter()">立即过滤</button>

小提琴链接

这是另一个 FIDDLE LINK 也检查一下

The following AngularJS application is working with ng-repeat and an applied filter. A certain applied filter leaves no values left. How can I display a notification?

js fiddle

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();
}

});

解决方案

I think this is what you want:

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>

FIDDLE LINK

This is Another one FIDDLE LINK check this also

这篇关于Angular js - 如果 ng-repeat 为空则显示消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！