Question

我有一个产品搜索表单。我希望确保当列表为空时，如果没有结果，它会向我显示一条消息。

我的代码：

<form ng-controller="productCtrl" name="searchForm" ng-submit="searchProduct()" ng-disabled="searchForm.$invalid">
    <input placeholder="Search" type="text" ng-model="form.name" required>
  <ion-list>
    <ion-item ng-repeat="product in list track by $index">{{ product.name }}</ion-item>
  </ion-list>
</form>

谢谢你:)

Answer 1

您可以在 ng-repeat

上方使用 ng-if

喜欢这个

<div ng-if="list.length<=0" style="color:red;">Error!</div>

例如：

<div ng-app="app">
  <div ng-controller="TodoCtrl">
  <div ng-if="todos.length<=0" style="color:red;">Error!</div>
  <div ng-repeat="item in todos">{{item.color}}</div>
  </div>
</div>

https://jsfiddle.net/vqJ5q/48/

Answer 2

有许多不同的答案，例如：

在另一个显示空状态消息的元素中使用* ng-if **或 ng-show 。检查将显示的列表长度。如果list.length <= 0显示此错误。
在 ng-if 元素中使用 ng-if 或 ng-hide 添加条件。如果list.length <=0。
或者您可以在范围对象中创建布尔标志，例如 isShowEmptyState = false ，并在列表为空时设置true

如果结果为空，则显示消息

2 个答案: