如何知道角度过滤数组的长度[重复]答案

【问题标题】：How to know the length of a filtered array in angular [duplicate]如何知道角度过滤数组的长度[重复]
【发布时间】：2017-06-20 17:55:20
【问题描述】：

我有一个搜索栏，可让用户使用 angular 根据他们的条目进行过滤。现在，当用户输入的搜索词与数组中的任何内容都不匹配时，我希望能够显示类似“Nothing matches your search”之类的消息。

我尝试使用 ng-change 监视用户的输入，然后循环遍历数组，搜索用户输入的每个参数，但这没有成功。这是我的代码示例。

html

<input ng-model="search" ng-change="check(search)">
<h4 ng-if="found === 0 ">Nothing matches your search</h4>
<div ng-controller="imCtrl" ng-repeat="imprest in imprests | filter:search">
    <h2>{{imprest.name}}</h2>
</div>

控制器

var office = angular.module('Office');

office.controller('imCtrl',[$scope,function('$scope'){
     $scope.imprests = [
          {name:'John'},
          {name:'Peter'}
     ]

     $scope.check = function (word) {
        var found = 0
        $scope.searching = true
        for (var i = 0; i < $scope.vendorForms.length; i++) {
            if($scope.imprests[i].name.includes(word){
                found++
            } 
        }
        $scope.found = found
        $scope.searching = true
        $scope.done = true
    }
})

是否可以知道过滤后数组的长度以便显示消息？

【问题讨论】：

你可以查看这个答案 - stackoverflow.com/questions/15316363/…

标签： javascript html angularjs

【解决方案1】：

您可以使用别名：

ng-repeat="imprest in imprests | filter:search as filtered"

然后就可以访问了：

{{filtered.length}}

【讨论】：

【解决方案2】：

您可以编写一个过滤器函数并使用它以角度代码过滤您的数组，然后检查它的长度。

$scope.myFilter(){
   // ... here your logic 
   // you need to compare with $scope.search
   // and then return the new array and check it's length
}

在标记中你可以像这样使用

<div ng-controller="imCtrl" ng-repeat="imprest in myFilter()">
    <h2>{{imprest.name}}</h2>
</div>

【讨论】：

【解决方案3】：

您应该能够使用(imprests | filter:search).length == 0 来执行此操作，然后您可以简单地添加ng-show 来代替您的ng-change 函数来显示错误，如下所示：

<input ng-model="search">
<h4 ng-if="found === 0 ">Nothing matches your search</h4>
<div ng-controller="imCtrl" ng-repeat="imprest in imprests | filter:search" ng-show="(imprests | filter:search).length !== 0">
    <h2>{{imprest.name}}</h2>
</div>
<div ng-show="(imprests | filter:search).length === 0">
    <h2>No results found</h2>
</div>

【讨论】：