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

Implementing search in AngularJS: default way

本文关键字：默认 方式 搜索 实现 AngularJS      更新时间：2023-09-26

我已经在我的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 重复的记录中不存在的关键字。我想要一条消息，说明"未找到任何内容"或其他任何内容。

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

如果您使用的是 Angular 1.3+，则可以使用别名：

<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>
相关文章：