當我的篩選器沒有結果時，如何返回消息？

Question

我已經設置了顯示不同產品的頁面。我製作了一個帶有ng-model="query"的搜索框，每當我鍵入我的查詢時，頁面就會自動更新爲我擁有的產品。

問題是，每當查詢不匹配的東西頁面保持空白，這看起來不好。我希望該網站顯示一條消息，說明「找不到產品」，而不是空白頁面。我怎樣才能做到這一點？

我看過其他問題和他們的解決方案，但他們沒有工作。

這是我的產品顯示方式的代碼。正如你所看到的，我已經添加了一個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

答案@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>

Answer 2

採取<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數據被加載後，味精顯示：

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