AngularJS：ng-click事件成功后隐藏X删除按钮的问题求助

先帮你梳理下现有代码里的几个关键问题，这些问题直接导致了删除图标始终隐藏的情况：

代码里的错误点 #

• vm变量未初始化：你在模板里用了vm作为控制器别名，但控制器里没有声明var vm = this;，导致vm是undefined，所有绑定的属性和方法都无法生效。
• 图标标签错误+显示控制位置不对：你的<i>标签没有闭合（应该是</i>），而且你把ng-show加在了状态标签上，而不是删除图标上，这就导致图标从来没被控制显示隐藏。
• 点击事件与函数定义不匹配：模板里绑定的是vm.deleteData()，但控制器里定义的是$scope.deleteData，两者不对应，点击事件根本触发不了正确的删除逻辑。
• 状态未初始化+逻辑混乱：你没有给dataStatus设置初始值（默认应该是"UNDELETED"），而且删除函数里的逻辑搞反了，应该是删除后修改dataStatus为"DELETED"，再基于这个状态控制图标显示，而不是用额外的isVisible变量绕圈子。

最优实现方案 #

推荐使用AngularJS的controllerAs语法（更清晰，避免$scope的混乱），直接通过数据状态vm.dataStatus来控制删除图标的显示，不需要额外的中间变量，代码更简洁直观。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- 引入Font Awesome，确保图标能正常显示 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
  <!-- 仅当数据状态为UNDELETED时显示删除图标 -->
  <a ng-click="vm.deleteData()">
    <i class="fa fa-times" ng-show="vm.dataStatus === 'UNDELETED'"></i>
  </a>
  <!-- 展示当前数据状态 -->
  <label>{{vm.dataStatus}}</label>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
  // 初始化vm为控制器实例，统一管理属性和方法
  var vm = this;
  // 设置默认状态为UNDELETED，保证页面初始状态正确
  vm.dataStatus = "UNDELETED";

  // 删除数据的核心方法
  vm.deleteData = function() {
    // 这里可以添加实际的删除逻辑（比如调用后端接口）
    // 模拟删除成功，修改状态为DELETED
    vm.dataStatus = "DELETED";
  };
});
</script>
</body>
</html>

关键说明 #

1. controllerAs语法：模板里用ng-controller="myCtrl as vm"，控制器里用var vm = this;，所有属性和方法都绑定在vm上，避免$scope带来的作用域混乱问题。
2. 直接基于状态控制显示：删除图标上的ng-show="vm.dataStatus === 'UNDELETED'"，逻辑直白——只有数据未删除时才显示删除按钮，无需额外变量中转。
3. 修正标签与事件绑定：闭合了<i>标签，点击事件绑定的vm.deleteData()和控制器里的方法完全对应，确保点击能触发正确的删除逻辑。
4. 初始化状态：默认设置vm.dataStatus = "UNDELETED"，保证页面加载时的初始状态符合需求。

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