AngularJS ng-click:修改被点击列表项的值

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

本文关键字：列表 ng-click 修改 AngularJS      更新时间：2023-09-26

我使用的是AngularJS，用户可以通过点击下面HTML中的+添加产品到他/她的订单中。之后，productname和id被添加到数组中，这样就可以工作了。但是在将数据添加到数组之后，应该更新所单击的列表项的链接。+应改为用户订单中该产品的数量如果他点击product 1乘以+应该更新为1。如果他点击2次产品，那么+就会更新为2，以此类推。现在我想我可以用:document.getElementById来完成这个。但是他更新了错误的列表项。每次第一个列表项被更新，而不是被点击的那个…

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

我如何更新列表项中被点击的正确链接?

$event。currentarget可以工作，但我认为最好将此功能移动到自定义"product-count"指令中。你想保持你的控制器尽可能干净，因为这段代码将运行相当多次，自定义指令对我来说是最好的选择。

如果需要，你可以很容易地将相同的功能移动到应用程序的其他部分。

edit:添加了一个代码示例，可以让你到达你想去的地方。

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

相关文章：