AngularJS筛选功能无匹配数据的处理方案问询

可以通过以下方式实现筛选无匹配数据时的提示效果：

修改后的代码 #

<input type="text" ng-model="vm.searchedItem" />

<div ng-if="vm.searchedItem" class="absolute border scroll-y bg-color-white"
     style="max-height: 300px;width: 355px;top : 35px;z-index: 99;">
    <!-- 遍历筛选后的城市列表 -->
    <span class="wid-100 fl p5"
          ng-repeat="v in vm.cityList | filter: vm.searchedItem as filteredList" 
          ng-bind="v.cityName">
    </span>
    <!-- 无匹配数据时显示提示 -->
    <span class="wid-100 fl p5" ng-if="filteredList.length === 0">
        No data found
    </span>
</div>

核心说明 #

• 存储筛选结果：在ng-repeat中使用as filteredList，将筛选后的结果赋值给变量filteredList，便于后续判断结果长度。
• 触发无数据提示：通过ng-if="filteredList.length === 0"控制提示文本的显示逻辑，仅当输入框有内容且筛选结果为空时，展示"No data found"。

内容的提问来源于stack exchange，提问作者Stack Overflow