使用 AngularJS 过滤后如何在数组中没有任何内容时显示消息

Question

我目前正在显示一个列表，该列表按字母顺序分组，但显示的是所有内容，一旦您单击 a、b、c 等...它就会过滤到那个字母。

但是如果你点击一个没有任何内容的字母，我希望它没有找到结果消息。

这是我试过的：

    <ul class="acronym-library-list" ng-repeat="parentItem in acronyms | groupBy:'type':'acronymBytype' | filter:acronymFilter">
        <h2>{{parentItem.type}}</h2>
        <li ng-repeat="item in acronyms | filter: { type: parentItem.type }">
            <div class="col-md-1 acronym">
                {{item.acronym}}
            </div>
            <div class="col-md-11 acronym-title">
                {{item.title}}
            </div> 
        </li>
    </ul>
    <p ng-show="acronyms.length==0">No results found...</p>

我也试过：

<p ng-show="!acronyms.length">No results found...</p>

更新：这是我的数组列表：

app.controller('AcronymLibrary', function($scope) {

    $scope.acronyms = [
        {type: 'A', acronym: 'AP', title: 'Accounts Payable'},
        {type: 'A', acronym: 'AR', title: 'Accounts Receivable'},
        {type: 'A', acronym: 'ASN', title: 'Advanced Shipping Notice'},
        {type: 'A', acronym: 'ATP', title: 'Available to Promise'},
        {type: 'B', acronym: 'BA', title: 'Business Analyst'},
        {type: 'B', acronym: 'BT', title: 'Business Technology'},
        {type: 'C', acronym: 'CM', title: 'Customer Master'},
        {type: 'D', acronym: 'DBA', title: 'Database Administer'},
        {type: 'D', acronym: 'DC', title: 'Distribution Center'},
        {type: 'E', acronym: 'ECC', title: 'Extended Care Component'},
        {type: 'F', acronym: 'FICO', title: 'Financials & Controlling'},
        {type: 'G', acronym: 'GL', title: 'General Ledger'},
        {type: 'K', acronym: 'KPI', title: 'Key Performance Indicator'}
    ];
});

Answer 1

该变量是一个数组，因此它不会 return 布尔值 false。

壁橱结果，如果你的数组中没有内容，那么长度将为 0。

所以你可以使用这个

<p ng-hide="acronyms.length == 0">No results found...</p>

Answer 2

之前尝试使用一个ng-init，例如：

<div class="container" ng-init="items = (list | filter : someFilter)">
  <ul ng-repeat="item in items" ng-show="items.length">
    ...
  </ul>

  <p ng-show="!items.length">No results found...</p>
</div>

Answer 3

尝试传递所有字母并检查数组中的记录，这是一个没有过滤器的解决方案。

我做到了：jsfiddle。net/fabiohbarbosa/s9L1nxhs看看对你有没有帮助

Answer 4

这就是我最终得到的结果：

    <ul class="acronym-library-list" ng-repeat="parentItem in filtered = (acronyms | groupBy:'type':'acronymBytype' | filter:acronymFilter)">
        <h2>{{parentItem.type}}</h2>
        <li ng-repeat="item in acronyms | filter: { type: parentItem.type }">
            <div class="col-md-1 acronym">
                {{item.acronym}}
            </div>
            <div class="col-md-11 acronym-title">
                {{item.title}}
            </div> 
        </li>
  </ul>
  <div>
     <h3 class="no-results" ng-show="!filtered.length">No results found...</h3>
  </div>

使用 AngularJS 过滤后如何在数组中没有任何内容时显示消息

How to show message when nothing in array after being filtered using AngularJS

angularjs

angularjs-ng-repeat

angular-filters