AngularJS ng-click: change value of list item that was clicked

Question

I am using AngularJS, a user can add products to his/her order by clicking on the + in the HTML down here. After that the productname and id gets added to an array and this works. BUT after the data is added to the array, the link of the list item that was clicked should be updated. The + should change into the quantity of that product in the users order. So if he clicks that product 1 time the + should update into a 1. If he clicks that product 2 times the + should update into a 2, etc. Now I thought I could accomplish this with: document.getElementById. But he updates the wrong list item. every time the first list item gets updated and not the one that was clicked...

HTML

  <ons-list>  
    <ons-list-item style="height:60px" ng-repeat="product in products | filter:search | orderBy: 'category'">
        <ul style="display:inline; text-decoration:none; list-style-type:none;">
         <li style="width: 35px; height:53px; float:left; padding:7px 0 0 5px; font-size:30px; color:gray; font-weight:thin; border-right:1px solid #ddd;"><a href="#" id="aantal" style="padding-top:10px;" ng-click="productAdd(product.name, product.id)">+</a></li>
         <li style="width:65%; float:left; padding-left:15px;">
            <ons-col width="100%" style="float:left; border-right:1px solid #F7F7F7;">
                <div class="name" style="height:20px; margin:0; padding:0 0 0 20px; font-size:16px; ">
                  {{product.name}}
                </div>
            <div class="desc" style="padding:0 0 0 20px; font-size:11px; position:absolute; top:20px;">
                {{product.description}}
                </div>
            </ons-col></li>
        </ul>
    </ons-list-item>
  </ons-list>

AngularJS

$scope.productAdd = function(pname, pid) {
    $scope.prodname = pname;
    $scope.prodid = pid;
    if($scope.order.length > 0){
        for(var b = 0; b<$scope.order.length;b++)
        {
            if($scope.order[b].prodid == pid)
            {
                $scope.order[b].aantal += 1;
                $scope.aantal = $scope.order[b].aantal;
            }
            else
            {
                $scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1});
                $scope.aantal = $scope.order[b].aantal;
            }

        }
    }
    if($scope.order.length == 0){
        $scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1});
        document.getElementById('aantal').innerHTML = '1';
    }

}

How can I update the right link in the list item, the one that was clicked?

Answer 1

$event.currentTarget will work but I think it would be best to move this functionality into a custom "product-count" directive. You want to keep your controllers as clean as possible and as this code will be run quite a few times, a custom directive would be the best choice for me.

You could easily then move the same functionality to other parts of your app if needed.

edit: added a code example of something that will you get to where you want to go.

(function() {
  
  function appController($scope) {
    $scope.products = [
      {
        name: 'Product one',
        description: 'Product one description',
        id: '1'
      }, {
        name: 'Product two',
        description: 'Product two description',
        id: '2'
      }
    ];
  }
  
  function productCount() {
    return {
      restrict: 'A',
      template: '<button ng-click="productAdd(product.name, product.id)">{{ productCount }}</button>',
      replace: true,
      scope: '@',
      controller: function($scope) {
        $scope.productCount = '+';
        $scope.productAdd = function(productName, productId) {
          if($scope.productCount === '+') {
            $scope.productCount = 0;
            $scope.productCount++
          } else {
            $scope.productCount++
          }
          console.log(productName, productId, $scope.productCount);
        };
      },
      link: function(scope, element) {
        scope.$watch('productCount', function(count) {
          // you can do something here if you wish to watch the product count.
          // you also have access to the ng-repeat product item if you wish to update it.
          console.log(scope.productCount); 
        });
      }
    }
  }
  
  angular.module('app', [])
    .controller('appController', appController)
    .directive('productCount', productCount);

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appController">
  <ul ng-repeat="product in products">
    <li>
      <button product-count></button>
      <div class="name">{{ product.name }}</div>
      <div class="desc">{{ product.description }}</div>
    </li>
  </ul>
</div>