Wie kann man die Länge eines gefilterten Arrays im Winkel kennen?

Question

Ich habe eine Suchleiste, mit der Benutzer basierend auf ihrem Eintrag mit eckigen filtern können. Jetzt möchte ich in der Lage sein, eine Nachricht wie "Nichts passt zu deiner Suche" anzuzeigen, wenn das vom Benutzer eingegebene Suchwort nichts mit dem Array übereinstimmt.

Ich versuchte, die Eingabe eines Benutzers mit ng-change zu überwachen und dann durch das Array durch die einzelnen Parameter für die Benutzereingabe zu durchlaufen, aber das geht nicht. Hier ist ein Beispiel meines Codes.

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> 

Controller

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

Ist es möglich, die Länge des gefilterten Arrays, also kann ich eine Meldung angezeigt?

Answer 1

Sie einen Aliasnamen verwenden:

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

Dann können Sie zugreifen:

{{filtered.length}} 

Answer 2

Sie können eine Filterfunktion schreiben und verwenden Sie es Ihr Array in Winkel Code zu filtern, und dann prüfen, es ist Länge.

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

in Markup können Sie wie

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

Answer 3

verwenden Sie sollten diese nutzen (imprests | filter:search).length == 0 Lage zu tun, und statt Ihrer ng-change Funktion dann können Sie einfach einen ng-show fügen Sie den Fehler zu zeigen, wie so :

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