AngularJS表格启用搜索过滤器时隐藏行内控件的实现问题

问题原因 #

你之前的代码有两个核心错误：

• 判断逻辑写反：你需要的是搜索激活时隐藏按钮，但之前写的vm.term.search != 'undefined'是在搜索词存在时返回真，反而会让按钮显示条件成立，和需求完全相反。
• 空值判断方式错误：'undefined'是字符串，和JS里的undefined类型完全不是一个值；且页面初始加载时vm.term.search是空字符串，既不是undefined也不是'undefined'，这个判断从一开始就不生效。

正确实现方案 #

第一步：初始化搜索词默认值（避免调用方法时报错）

在控制器初始化vm.term的位置，给search字段设空字符串默认值：

// 原有term初始化逻辑补充默认值
vm.term = {
  search: ''
  // 其他原有字段保持不变
};

第二步：修改按钮显示判断逻辑

把两个按钮的显示判断方法，加上搜索激活状态的校验，搜索激活时直接返回false隐藏按钮：

vm.showResUpButton = function ($index) {
  // 判断是否处于搜索状态：搜索词去除首尾空格后长度大于0即为激活
  const isSearchActive = vm.term.search.trim().length > 0;
  // 搜索激活时直接隐藏；非搜索状态下才保留原有索引判断逻辑（第一行不显示）
  return !isSearchActive && $index > 0;
}

vm.showResDownButton = function ($last) {
  const isSearchActive = vm.term.search.trim().length > 0;
  // 搜索激活时直接隐藏；非搜索状态下保留原有最后一行判断逻辑
  return !isSearchActive && $last;
}

可选简化写法 #

如果不想改控制器方法，也可以直接在模板的ng-show指令里加搜索状态判断，逻辑和上面完全一致：

<a id="resUp" ng-click="vm.resolve(l)" ng-show="!vm.term.search.trim() && $index > 0">ResUp</a>
<a id="resDown" ng-click="vm.resolveDown(l)" ng-show="!vm.term.search.trim() && $last">ResDown</a>

这种写法可以直接删掉控制器里对应的两个判断方法，逻辑更直观，适合简单判断场景。

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