Question

我一直在寻找类似问题，但似乎无法解决我的问题。我只想在点击“编辑”时弹出一个“产品”“编辑表单”。我明白为什么它打开所有这些，但我不知道如何解决它。我的ng-hide和ng-show中可能有什么东西？

感谢您的帮助。

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>

Answer 1

我不确定你在这里发生了什么，但对于初学者来说，在同一个div中使用ng-hide和ng-show指令真的没什么意义。您应该只使用其中一个并将其分配给布尔值以在显示和隐藏之间切换。

这肯定是您遇到的奇怪功能的来源

Answer 2

$scope.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>

注意：确保在使用后删除showForm媒体资源

Answer 3

    <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;
}

ng-repeat内部的ng-click影响ALL表单而不是一个

3 个答案: