Question

我有一个由angularjs中的ng-repeat生成的列表。

<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items" ng-show="item.Show">
        <h4>Name: {{item.Name}}</h4>
    </li>
    <li class="list-group-item" ng-show="items.length == 0">
        <h4>No matching items</h4>
    </li>
</ul>

http://plnkr.co/edit/FGc3TTgQfWhx8OtXEQW1?s=0w82sTF5k9duukKJ 在这个过于简化的示例中，我显示了一个基于json对象生成的列表关于布尔值是设置为true还是false。如果没有项目强制执行此规则，我该如何显示消息？我只找到了与文本过滤相关的答案，所以我希望这不是重复的。

Answer 1

有一个范围变量来检查json是否有真项，请检查以下代码。

<li class="list-group-item" ng-repeat="item in items" ng-if="item.Show" ng-show="hasResults" >
  <h4><p>Name: {{item.Name}}</p></h4>
</li>
<li class="list-group-item" ng-hide="hasResults">
  <h4>No matching items</h4>
</li>

和您的控制器功能

function ItemController($scope, $http) {
  $scope.hasResults = false;

  $http.get('items.json').success(function(data) {
    $scope.items = data;
    angular.forEach($scope.items, function(item) {
      if (item.Show && !$scope.hasResults) {
        $scope.hasResults = true;
      }
    });
  });
}

Answer 2

这应该可以解决问题：

<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in items" ng-if="Object.keys(items).length > 0">
        <h4>Name: {{item.Name}}</h4>
    </li>
    <li class="list-group-item" ng-if="Object.keys(items).length <= 0">
        <h4>No matching items</h4>
    </li>
</ul>

如果ng-repeat没有返回结果，则显示ng-show

2 个答案: