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>

AngularJS ng-click：更改单击的列表项的值

1 个答案: