Question

我已经设置了显示不同产品的页面。我已经使用ng-model="query"创建了一个搜索框，每当我输入查询时，页面都会自动更新为我拥有的产品。

问题在于，只要查询没有匹配，页面就会保持空白，这看起来并不好。而不是一个空白页面，我希望网站显示一条消息，说明＆＃34;没有找到产品＆＃34;。我怎样才能做到这一点？

我已经查看了其他问题及其解决方案，但他们没有工作。

以下是我的产品展示方式代码。正如您所看到的，我已经添加了ng-show="products.length === 0作为一些解决方案建议，但是当我没有匹配时，该消息永远不会出现。

        <ul class="list-group">
        <li ng-repeat="product in products | filter:query" class="list-group-item">
            <h3><a id="productName" href="#/products/{{product.name}}">{{ product.name }}</a></h3>
            <img id="mainImage" ng-src="{{ product.imgUrl }}" alt="{{ product.name}}">
            <p id="description"> {{ product.description }}</p>
            <p id="price"> Price: {{ product.price }} £</p>
            <p ng-show="products.length === 0">Nothing found</p>
        </li>
    </ul>

以下是产品页面的控制器代码：

//Controller that fetches the available products to display them in the view
app.controller('productListController', function($scope, $http){
$http.get('products/products.json').success(function(data){
    $scope.products = data.products;
    });
});

以下是搜索框的代码：

<div id="searchbox">
        <div class="input-group">
        <input type="text" class="form-control" ng-model="query" placeholder="Search for...">
            <span style="width=1%;" class="input-group-btn">
              <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
            </span>
        </div><!-- /input-group -->
        </div><!-- searchbox -->

Answer 1

取<p ng-show="products.length === 0">Nothing found</p>之外的ng-repeat。

<li ng-repeat="product in filteredProducts = (products | filter:query)" class="list-group-item">
    <h3><a id="productName" href="#/products/{{product.name}}">{{ product.name }}</a></h3>
    <img id="mainImage" ng-src="{{ product.imgUrl }}" alt="{{ product.name}}">
    <p id="description"> {{ product.description }}</p>
    <p id="price"> Price: {{ product.price }} £</p>
</li>
<p ng-show="filteredProducts.length === 0">Nothing found</p>

它没有显示，因为ng-repeat为空。

编辑：

为了确保在加载products数据后显示msg：

$http.get('products/products.json').success(function(data){
       $scope.products = (data.products && data.products.length > 0) ? data.products : [];
    });
});

Answer 2

答案@Daniel并不完全正确。

当您ng-repeat使用filter时，此filter也必须适用于ng-show的条件。

像这样：

<ul> 
 <li ng-repeat="product in products | filter:query" class="list-group-item">
  <h3><a id="productName" href="#/products/{{product.name}}">{{ product.name }}</a></h3>
  <img id="mainImage" ng-src="{{ product.imgUrl }}" alt="{{ product.name}}">
  <p id="description"> {{ product.description }}</p>
  <p id="price"> Price: {{ product.price }} £</p>
 </li>
</ul>
<p ng-show="products && (products| filter:query).length === 0">Nothing found</p>

jsfiddle上的实例。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.search = {};
    $scope.arr = [];
    $scope.isLoaded = false;
    $scope.load = function() {
    $scope.isLoaded = true;
      $scope.arr = [{
        x: 1
      }, {
        x: 2
      }, {
        x: 3
      }, {
        x: 11
      }, {
        x: 12
      }];
    };
    $scope.clear = function() {
      $scope.isLoaded = false;
      $scope.arr = [];
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <input ng-model="search.x">
    <button ng-click="load()">
      Load array
    </button>
    <button ng-click="clear()">
      Clear array
    </button>
    <div ng-repeat="a in arrFiltered = (arr|filter:search)">
      {{a.x}}
    </div>
    <div ng-show="isLoaded && arrFiltered.length==0">
      not found
    </div>

  </div>
</div>

当我的过滤器没有结果时，如何返回消息？

2 个答案: