Komunikat wyświetlany w AngularJS, gdy obiekt jest pusty we wzmacniaczu

Question

Używam AngularJS i repeatera do iteracji niektórych wyników. Jest również filtr stosowany do wyszukiwania.

Są dwa warunki, które chciałbym móc obsłużyć i szukam najbardziej "kątowego" sposobu.

Pierwszym warunkiem jest brak wyników na samym początku.

Drugi warunek to sytuacja, w której podczas korzystania z filtra nie są zwracane żadne wyniki.

Zobaczyłem this, który wydaje się być odpowiedni i mogę utworzyć dla każdego warunku. Jednak czy jest i tak z natywnymi dyrektywami kątowymi do obsługi tych warunków, bez wymagania kodu w kontrolerze?

Dzięki!

Answer 1

Możesz dodać dyrektywę ngSwitch do filtrowanej tablicy i wyświetlać inny kod HTML w zależności od jego długości.

jsFiddle.

HTML:

<div ng-app ng-controller="Ctrl"> 
Search: <input ng-model="searchText"> 
<div ng-init="filtered = (friends | filter:searchText)"> 
    <div>{{(friends | filter:searchText).length}}</div> 
    <div ng-switch="(friends | filter:searchText).length"> 
     <span ng-switch-when="0">Nothing was found</span> 
     <table id="searchTextResults" ng-switch-default> 
      <tr> 
       <th>Name</th> 
       <th>Phone</th> 
      </tr> 
      <tr ng-repeat="friend in filtered | filter:searchText"> 
       <td>{{friend.name}}</td> 
       <td>{{friend.phone}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

JS:

function Ctrl($scope) { 
$scope.searchText = ""; 
$scope.friends = [{ 
    name: 'John', 
    phone: '555-1276' 
}, { 
    name: 'Mary', 
    phone: '800-BIG-MARY' 
}, { 
    name: 'Mike', 
    phone: '555-4321' 
}, { 
    name: 'Adam', 
    phone: '555-5678' 
}, { 
    name: 'Julie', 
    phone: '555-8765' 
}]; 
} 

Innym rozwiązaniem jest zastosowanie $ filtr ("Filter") w dniu znajomymi tablicy bezpośrednio w sterowniku, który skróci znaczników HTML .

Answer 2

Państwo mogą korzystać z tej składni dla Pokazuje Wiadomość Kiedy Brak danych

<p ng-show="(friends | filter:searchText).length==0">Sorry No Result Found</p>` 

Gdzie przyjaciół jest obiekt JSON.

Answer 3

ngRepeat pozwala nadać alias wynikowym elementom po przetworzeniu wszystkich filtrów. Możesz użyć tego aliasu do wyświetlenia wiadomości.

<p ng-repeat="friend in friends | filter:searchText as displayedFriends"> 
    {{friend.name}} 
</p> 
<p ng-if="!displayedFriends.length"> 
    Nothing was found 
</p>