在 AngularJS 中实现搜索：默认方式

Question

我在我的 angularjs 应用程序中实现了默认搜索，代码如下：

<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>

我在这里面临的问题是，假设有人碰巧触发了一些在 ng-repeated 记录中不存在的关键字。我希望出现一条消息，说明 "Nothing found" 或其他内容。

如何实现该逻辑？我在这里浏览了不同的文章和几个问题，在这方面找不到任何东西。我如何查看搜索的术语的长度是否为零，以便我可以 ng-if 那个东西并显示消息？谢谢！

Answer 1

如果您使用的是 Angular 1.3+，您可以使用 alias:

<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>

如果您不得不使用旧的 Angular，您可以将过滤器的结果分配给一个新数组，然后检查它的长度：

<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>

在 AngularJS 中实现搜索：默认方式

Implementing search in AngularJS: default way

javascript

filter

angularjs

angular-filters