AngularJS ng-click：更改被點擊的列表項的值

Question

我正在使用AngularJS，用戶可以通過點擊下面的HTML中的+來將產品添加到他/她的訂單中。之後，productname和id被添加到數組中，並且這可以工作。但是在將數據添加到數組後，應該更新被點擊的列表項的鏈接。 +應該變成用戶訂單中該產品的數量。所以如果他點擊那個產品1次+應該更新爲1.如果他點擊那個產品2次+應該更新到2等。現在我想我可以完成這個：document.getElementById。但他更新了錯誤的列表項。每個第一個列表項被更新的時間，而不是一個被點擊...

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

} 

我如何更新正確的鏈接列表項目，被點擊的項目？

Answer 1

$ event.currentTarget可以工作，但我認爲最好將這個功能移動到一個自定義的「product-count」指令中。您希望儘可能保持控制器的清潔，並且由於此代碼將運行不少次，所以自定義指令將是我的最佳選擇。

如果需要，您可以輕鬆地將相同的功能移動到應用程序的其他部分。

編輯：添加了一個代碼示例，你會得到你想要去的地方。

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