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

Question

我正在使用AngularJS，用戶可以通過單擊此處HTML下方的+將產品添加到他/她的訂單中。 之后，將產品名稱和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>