Angularjs: ng-show занимает некоторое время, чтобы отразить

Question

У меня есть страница поиска say 'search_page.html'. Я хочу показать сообщение «Нет записи найдено», если пользователи нажимают кнопку поиска, и запись не найдена.

Вот код для отображения сообщения:

<div nng-show="list.length==0"> 
     <span>No record is found</span>    
</div> 

<div ng-repeat="x in list"> 
    --showing the record here 
</div> 

Когда тип пользователя что-то в текстовом поле и нажмите на кнопку поиска, а затем «запись не найдена» отображается, и если поиск записей существует, то она исчезает через некоторое время и записи.

Может ли кто-нибудь предложить мне лучшее решение. Я хочу показать сообщение только в том случае, если нет результата поиска.

Answer 1

Я хотел бы что-то вроде этого demo.

Так в основном, то, что сделал это работа в ng-repeat

<li ng-repeat='item in vm.filtered = (vm.items | filter: vm.query)'>{{item}}</li> 

я сэкономил отфильтрованные элементы, так что я есть способ проверить его количество, то есть нг-если текста, когда Количество отфильтрованных пункты равно нулю, как

<div ng-if='vm.filtered.length == 0'>No match found</div> 

Answer 2

Так что это можно сделать, используя хитрый код, как:

в контроллере:

$scope.noRecords = false; 
Service.getRecord(function(data){ 
    $scope.list = data.list; 
    if($scope.list.length == 0){ 
    $scope.noRecords = true; 
    } 
}); 

В HTML:

<div ng-show="noRecords"> 
     <span>No record is found</span>    
</div> 

<div ng-repeat="x in list"> 
    --showing the record here 
</div> 

Таким образом, он должен работать нормально

Answer 3

Наконец я должен изменить контроллер и вид. Вот мое решение:

Ввиду:

<div class="divEmpty" id="divNoRecord"> 
       No record is found 
</div> 

CSS:

.divEmpty { 
     display:none; 
     text-align:center; 
    } 

Контроллер

if ($scope.list.length == 0) { 
    angular.element(document.getElementById('divNoRecord')).show(); 
} 
else { 

     angular.element(document.getElementById('divNoRecord')).hide(); 
    }