AngularJS中名称匹配第二个对象时隐藏表格行按钮

我来帮你快速搞定这个需求！核心思路是用AngularJS的指令配合判断函数，精准控制按钮的显示与隐藏。下面给你两种实用方案：

方案一：直接遍历判断（适合小数据量场景） #

先在控制器里写个辅助函数，用来检查当前行的name是否存在于$scope.items的itemName列表中：

$scope.shouldHideButton = function(currentName) {
  // 用Array.some()方法，找到匹配项就返回true
  return $scope.items.some(function(item) {
    return item.itemName === currentName;
  });
};

接着在HTML表格里给按钮加上ng-hide指令，调用这个判断函数：

<table>
  <tr ng-repeat="item in data">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>
      <!-- 当判断返回true时，按钮自动隐藏 -->
      <button ng-hide="shouldHideButton(item.name)">操作按钮</button>
    </td>
  </tr>
</table>

方案二：预处理集合（适合大数据量场景） #

如果你的items数组比较大，每次遍历会影响性能，建议提前把需要隐藏的名称提取成Set（查找效率是O(1)，比遍历数组快很多）：

// 初始化时把items里的itemName提取为Set集合
$scope.hiddenNameSet = new Set($scope.items.map(item => item.itemName));

// 简化判断函数
$scope.shouldHideButton = function(currentName) {
  return $scope.hiddenNameSet.has(currentName);
};

HTML部分和方案一完全一致，还是用ng-hide="shouldHideButton(item.name)"即可。

小细节：ng-hide和ng-if的区别 #

• ng-hide是通过CSS的display: none隐藏元素，元素仍保留在DOM中；
• 要是想直接把按钮从DOM里移除，可以换成ng-if="!shouldHideButton(item.name)"（注意取反逻辑）。

这样就能完美实现你的需求：当表格行的name和$scope.items里的itemName匹配时，对应行的按钮就会自动隐藏啦！

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