如何在使用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

这就是我最终成功的结果：

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

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，看看它是否对你有帮助。