Angularjs 嵌套ng在ng内单击，重复影响所有表单，而不是一个表单

我一直在关注类似的问题，但似乎无法解决我的问题。我只想在单击“编辑”时弹出一个“产品”“编辑表单”。我知道为什么它会打开所有这些表单，但我不知道如何修复它。我的ng隐藏和ng秀中可能有什么东西

谢谢你的帮助

AdminCtrl.js

$scope.isTrue = false;

$scope.showForm = function() {
  if ($scope.isTrue === false) {
    $scope.isTrue = true;
  }
  else $scope.isTrue = false;
}

adminTmpl.html

<div ng-repeat="product in allProducts | filter:search">
  <strong>{{ product.name }}</strong> <br />
  Description: {{ product.description }} <br />
  Price: {{ product.price }} <br />
  <div class="edit-form" ng-hide=true ng-show="isTrue">
    <input type="text" placeholder="Name" ng-model="update.name" />
    <input type="text" placeholder="Description" ng-model="update.description" />
    <input type="number" placeholder="Price" ng-model="update.price" />
    <button ng-click="edit(product._id, update); showForm()">Update</button>
  </div>
  <div>
    <button ng-click="showForm()">Edit</button>
    <button ng-click="delete(product._id)">Delete</button><br /><br />
  </div>
</div>

{{product.name}

描述：{{product.Description}}

价格：{{product.Price}}

更新
编辑
删除

我不太清楚这里到底发生了什么，但对于初学者来说，将

ng hide

和

ng show

指令放在同一个div中并没有多大意义。您应该只使用其中一个指令并将其分配给布尔值，以便在显示和隐藏之间切换

---

这肯定是您正在体验的奇怪功能的来源。isTrue对于您的所有元素都是通用的，您希望为该表单使用特定的作用域变量，因为

product

对于您的每个表单都是唯一的，所以您可以使用

ng show='product.showForm'

来显示表单

单击编辑，设置

product.showForm=true

<div ng-repeat="product in allProducts | filter:search">
  <strong>{{ product.name }}</strong> <br />
  Description: {{ product.description }} <br />
  Price: {{ product.price }} <br />
  <div class="edit-form" ng-show="product.showForm">
    <input type="text" placeholder="Name" ng-model="update.name" />
    <input type="text" placeholder="Description" ng-model="update.description" />
    <input type="number" placeholder="Price" ng-model="update.price" />
    <button ng-click="edit(product._id, update); product.showForm = false">Update</button>
  </div>
  <div>
    <button ng-click="product.showForm = true">Edit</button>
    <button ng-click="delete(product._id)">Delete</button><br /><br />
  </div>
</div>

{{product.name}

描述：{{product.Description}}

价格：{{product.Price}}

更新
编辑
删除

---

注意：请确保在使用后删除

showForm

属性

添加一个JSFIDLE在将来会非常有用。很好，我现在得到了与此非常类似的东西。但是，我怎样才能使再次单击相同的“编辑”按钮将关闭表单？谢谢你的帮助<代码>编辑只需在单击时对值求反

    <div ng-repeat="product in allProducts | filter:search">
  <div class="" ng-show="!product.isEditing">
    <strong>{{ product.name }}</strong> <br />
  Description: {{ product.description }} <br />
  Price: {{ product.price }} <br />
  </div>

  <div class="edit-form" ng-show="product.isEditing">
    <input type="text" placeholder="Name" ng-model="update.name" />
    <input type="text" placeholder="Description" ng-model="update.description" />
    <input type="number" placeholder="Price" ng-model="update.price" />
    <button ng-click="edit(product._id, update); product.isEditing = false">Update</button>
  </div>

  <div>
    <button ng-click="showForm($index)">Edit</button>
    <button ng-click="delete(product._id)">Delete</button><br /><br />
  </div>
</div>

showForm(index) {
  $scope.allProducts[index].isEditing = true;
}