Question

我有一个搜索页面说'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>

我保存了已过滤的项目，因此我可以检查其计数，然后在过滤项目的计数为零时显示文本的ng-if，如

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

Angularjs：ng-show花了一些时间来反思

3 个答案: