如何在Angular中点击表格行时显示指定div或激活编辑按钮？

嘿，作为Angular新手，别慌！咱们把问题拆解开，用Angular原生的方式来实现你的需求——比混用jQuery更稳妥，也更符合框架的设计思路。

核心思路 #

Angular是数据驱动的框架，咱们不用直接操作DOM（比如jQuery的show()/hide()），而是通过变量控制视图的显示状态。同时给表格行绑定点击事件，触发对应的状态变更。

第一步：修改控制器逻辑（替换jQuery） #

先在你的Angular控制器里定义控制状态的变量和方法，完全替代原来的jQuery脚本：

// 记得替换成你的应用名称和控制器名称
angular.module('userManagementApp', [])
.controller('UserController', function($scope) {
  // 控制两个表单的显示状态
  $scope.showEditForm = false;
  $scope.showAddForm = false;
  
  // 标记是否有表格行被选中（用于激活Edit按钮）
  $scope.isRowSelected = false;
  
  // 存储选中的行数据，用于编辑回显
  $scope.activeItem = {};

  // 表格行点击事件：选中行并触发操作
  $scope.onRowClick = function(item) {
    // 复制选中行的数据到activeItem，避免直接修改原数据
    $scope.activeItem = angular.copy(item);
    // 方案1：直接显示编辑表单
    $scope.showEditForm = true;
    $scope.showAddForm = false;
    
    // 方案2：激活Edit按钮（如果需要点击按钮才显示表单）
    $scope.isRowSelected = true;
  };

  // Edit按钮点击事件
  $scope.onEditBtnClick = function() {
    if ($scope.isRowSelected) {
      $scope.showEditForm = true;
      $scope.showAddForm = false;
    }
  };

  // Add按钮点击事件
  $scope.onAddBtnClick = function() {
    $scope.showAddForm = true;
    $scope.showEditForm = false;
    // 清空添加表单的输入项
    $scope.usernamee = '';
    $scope.passwordd = '';
    $scope.namee = '';
  };

  // 你的保存编辑方法（保留原有逻辑）
  $scope.saveItem = function(isValid) {
    if (isValid) {
      // 这里写保存逻辑，比如调用后端API更新数据
      console.log('保存编辑数据：', $scope.activeItem);
    }
  };

  // 你的创建用户方法（保留原有逻辑）
  $scope.createUser = function(isValid) {
    if (isValid) {
      const newUser = {
        username: $scope.usernamee,
        password: $scope.passwordd,
        name: $scope.namee
      };
      console.log('创建新用户：', newUser);
    }
  };
});

第二步：修改HTML模板（绑定Angular指令） #

把原来的HTML改成用Angular指令控制，去掉jQuery脚本：

<!-- 记得在根元素（比如body）添加应用和控制器关联 -->
<body ng-app="userManagementApp" ng-controller="UserController">
  <!-- 按钮区域：用ng-click绑定方法，ng-disabled控制按钮激活状态 -->
  <button id="editbtn" ng-click="onEditBtnClick()" ng-disabled="!isRowSelected">Edit</button>
  <button id="addbtn" ng-click="onAddBtnClick()">Add</button>

  <!-- 编辑表单：用ng-show替代style="display:none"，由变量控制显示 -->
  <div class="hideShow" ng-show="showEditForm">
    <div class="form">
      <form ng-submit="saveItem(userForm.$valid)" name="userForm">
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="database_address">Потребителско име</label>
              <input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
            </div>
            <div class="form-group">
              <label for="password">Парола*</label>
              <input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
            </div>
            <div class="form-group">
              <label for="password">Потвърждаване на парола*</label>
              <input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm" />
            </div>
            <p ng-show="(activeItem.passwordString != activeItem.passwordConfirm)" style="color:red">Паролите не съвпадата</p>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="username">Оператор</label>
              <input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
            </div>
          </div>
        </div>
        <button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запиши</button>
      </form>
    </div>
  </div>

  <!-- 添加表单：同样用ng-show控制显示 -->
  <div class="hideShow1" ng-show="showAddForm">
    <div class="form">
      <form ng-submit="createUser(userForm1.$valid)" name="userForm1">
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="database_address">Потребител</label>
              <input type="text" class="form-control" ng-model="usernamee" placeholder="Потребителско Име..." />
            </div>
            <div class="form-group">
              <label for="password">Парола</label>
              <input type="text" class="form-control" ng-model="passwordd" required id="password" />
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="username">Оператор</label>
              <input type="text" class="form-control" ng-model="namee" required id="username" />
            </div>
          </div>
        </div>
        <button class="btn btn-primary" type="submit">Запиши</button>
      </form>
    </div>
  </div>

  <!-- 表格区域：给每行添加ng-click事件，假设items是你的用户列表数据 -->
  <table class="table">
    <thead>
      <tr>
        <th>Потребителско име</th>
        <th>Оператор</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items" ng-click="onRowClick(item)" style="cursor: pointer;">
        <td>{{item.username}}</td>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
</body>

关键说明 #

1. 数据驱动视图：用ng-show替代DOM操作，完全由控制器里的变量控制表单显示，避免Angular和jQuery混用导致的数据不同步问题。
2. 表格行点击：通过ng-click="onRowClick(item)"把当前行的数据传给控制器，同时触发表单显示或按钮激活。
3. 按钮激活逻辑：用ng-disabled="!isRowSelected"控制Edit按钮的状态，只有选中行后按钮才可以点击。
4. 数据隔离：用angular.copy(item)复制选中行的数据，避免直接修改原列表数据，保证数据的纯净性。

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