Implementierung Suche in AngularJS: default Weise

Question

ich die Standard-Suche in meiner AngularJS App implementiert haben, ist der Code wie folgt:

<div> 
<input type="text" ng-model="searchKeyword" placeholder="Search records..."> 
<div class="checkbox" ng-repeat="record in records | filter: searchKeyword"> 
<label class="ms-pl-xs"> 
    <input type="checkbox">{{record.value}}&nbsp;[{{record.count}}] 
</label> 
</div> 

Das Problem, das ich bin hier mit Blick ist, geschieht nehme an, jemanden zu feuern up ein Schlüsselwort, das nicht in den Datensätzen enthalten ist, die wiederholt werden. Ich möchte, dass eine Nachricht erscheint, in der steht: "Nichts gefunden" oder was auch immer.

Wie implementiere ich diese Logik? Ich habe verschiedene Artikel und einige Fragen hier durchgegangen, konnte diesbezüglich nichts finden. Wie sehe ich dafür, ob die Länge der gesuchten Begriffe null ist, damit ich ng-wenn das Ding und die Nachricht anzeigen kann? Vielen Dank!

Answer 1

Wenn Sie Angular 1.3+ verwenden, können Sie ein alias verwenden:

<div> 
    <input type="text" ng-model="searchKeyword" placeholder="Search records..." /> 
    <div class="checkbox" ng-repeat="record in records | filter: searchKeyword as found"> 
    <label class="ms-pl-xs"> 
     <input type="checkbox">{{record.value}}&nbsp;[{{record.count}}] 
    </label> 
    </div> 
    <div ng-if="found === 0"> 
    Nothing found 
    </div> 
</div> 

Wenn Sie stattdessen eine ältere Angular verwenden müssen, können Sie das Ergebnis des Filters zu einem neuen Array zuweisen, und dann es überprüfen Länge:

<div> 
    <input type="text" ng-model="searchKeyword" placeholder="Search records..." /> 
    <div class="checkbox" ng-repeat="record in filteredRecords = (records | filter: searchKeyword)"> 
    <label class="ms-pl-xs"> 
     <input type="checkbox">{{record.value}}&nbsp;[{{record.count}}] 
    </label> 
    </div> 
    <div ng-if="filteredRecords.length === 0"> 
    Nothing found 
    </div> 
</div>