Nested ng-click inside of ng-repeat affecting ALL forms instead of one

Question

I've been looking a bit around here on similar issues but can't seem to get my issue working. I just want one of the "products" "edit-forms" to pop up when I click "edit." I get why it's opening all of them up, but I'm not sure how to fix it. Possible something in my ng-hide and ng-show?

Thanks for the help.

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>

score 0 · Answer 1 · answered Apr 04 '16 at 02:09

0

I am not exactly sure what you have going on here but for starters it doesn't really make a ton of sense to have the ng-hide and ng-show directives in the same div. You should only be using one of these and assigning it to a boolean to toggle between showing and hiding.

This could definitely be the source of the weird functionality you are experiencing

answered Apr 04 '16 at 02:09

Maxwelll

2,174
1
17
22

Adding a jsfiddle would be super helpful in the future – Maxwelll Apr 04 '16 at 02:11

score 0 · Answer 2 · answered Apr 04 '16 at 02:23

$scope.isTrue is common for all your elements, you want to use specific scoped variable for that form, since product is unique for your each form, you can use ng-show='product.showForm' to show the form

On clicking edit, set 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>

Note: Make sure you delete showForm property after use

Great I got something very similar to this working now. However, how could I make it so that clicking that same "Edit" button again will close the form? Thanks for the help! — alexanderdd, Apr 05 '16 at 00:44

score 0 · Answer 3 · answered Apr 04 '16 at 02:28

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

on your controller

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

Nested ng-click inside of ng-repeat affecting ALL forms instead of one

3 Answers3