AngularJS中ng-show点击详情按钮无法仅显示对应产品详情问题

嘿，我懂你这个问题！之前做AngularJS项目的时候也踩过类似的坑——点击「详情」按钮就把所有产品的详情都展开了，这明显不是预期的效果。问题的核心在于你大概率用了一个全局的布尔变量（比如$scope.showDetail）来控制所有行的显示/隐藏，所有行都绑定同一个变量，自然一点击就全展开了。

下面是具体的解决方案，让每个产品的详情状态独立可控：

1. 修改控制器逻辑：给每个产品添加独立的显示属性 #

当你从数据库加载完产品数据后，给每个产品对象新增一个isShowDetail属性，初始值设为false（默认不显示详情）：

var app = angular.module("dataApp", []); 
app.controller("dataExcuteController", function ($scope) {
  // 假设这是你从数据库获取的产品数据
  $scope.products = [
    { id: 1, name: "产品A", price: 100, description: "这是产品A的详情" },
    { id: 2, name: "产品B", price: 200, description: "这是产品B的详情" }
    // 更多产品...
  ];

  // 给每个产品初始化详情显示状态
  $scope.products.forEach(function(product) {
    product.isShowDetail = false;
  });

  // 切换单个产品的详情显示状态
  $scope.toggleDetail = function(product) {
    product.isShowDetail = !product.isShowDetail;
  };
});

2. 修改HTML模板：绑定单个产品的显示状态 #

把按钮的点击事件改成调用toggleDetail(product)（传递当前产品对象），然后把详情行的ng-show绑定到当前产品的isShowDetail属性上：

<table border="1">
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody ng-repeat="product in products">
    <!-- 产品信息行 -->
    <tr>
      <td>{{product.name}}</td>
      <td>{{product.price}}</td>
      <td><button ng-click="toggleDetail(product)">详情</button></td>
    </tr>
    <!-- 产品详情行，仅当当前产品的isShowDetail为true时显示 -->
    <tr ng-show="product.isShowDetail">
      <td colspan="3">
        <strong>产品详情：</strong><br>
        产品ID：{{product.id}}<br>
        描述：{{product.description}}
      </td>
    </tr>
  </tbody>
</table>

为什么这个方法有效？ #

原来的方案用全局变量控制所有行，相当于所有行共享同一个开关；而现在每个产品都有自己独立的isShowDetail开关，点击按钮只会切换当前产品的开关状态，其他产品的状态不受影响，自然就只会展开被点击产品的详情啦。

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