Angular JS-如果ng-repeat为空则显示消息

Question

以下AngularJS应用程序正在使用ng-repeat和已应用的过滤器。某个应用的过滤器不会留下任何值。如何显示通知？

js小提琴

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

});

Answer 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>

链接

这是另一个FIDDLE LINK，请检查此