Question

我一直面临一个意想不到的问题。这是我的代码

<li ng-repeat="(key,product) in products">
   <div class="avl-box">
     <a href="javascript:void();" ng-click="showDetail(product.item_id);">
         <img ng-src="{{SITEURL}}files/item/f_image/{{key}}/{{product.f_image}}" width="1000" height="1000" alt="">
     </a>
   </div>
</li>

在我的产品阵列中，我有3个产品。即使ng:click();，所有事情也都很好。但我的问题是ng:click点击three时once执行ng-options次的原因？我搜索了很多，但对我来说没什么用。与ng-change和<select class="form-control dropDownPercent" name="demo" ng-model="CampaignsService.percentModel[$index]" ng-change="CampaignsService.showChange(CampaignsService.percentModel[$index], $index)" ng-options="o as o for o in CampaignsService.percentDropDownOptions[$index].values">在一起的同一问题。见下面的例子 -

选项正常，在此下拉列表中我要显示showChange个项目，但是当我选择一个时，10函数确实执行了0 0 1 2 2 1 1次。任何人都可以帮助我吗？

Answer 1

我找到了长途跋涉后代码失败的原因。原因是，我在我的一个表达中调用了一个函数，那就是

<div class="slide3-price"> {{showDetail().item_price | currency}} </div>

我的职能是

$scope.showDetail = function (prod_id) {

            if (typeof prod_id === 'undefined') {
                prod_id = 27;
            }
            //logical code
            return {
                'colors': json.campaign_data.Product[prod_id].Color,
                'prod_title': this.val,
                'f_image': json.campaign_data.Product[prod_id].f_image,
                'item_id': prod_id,
                'item_price': json.campaign_data.Product[prod_id].price
            }

        }

因此，绑定表达式中的函数会强制为每个摘要上的每个项目重新评估该函数。我没有在表达式中调用函数，而是创建了一个值数组并在模板中使用它们。像

<div class="slide3-price"> {{campaignDetailDescription['item_price'] | currency}} | currency}} </div>

但为了防止多次调用某个函数，我们需要add a watch listener to this variable或add a counter vairable。我做了一个计数器，现在我的功能看起来像

$scope.showDetail = function (prod_id) {

            var counter = 0;

            if (counter === 0) {

                if (typeof prod_id === 'undefined') {
                    $scope.setItemId();
                } else {
                    $scope.item_id2 = prod_id;
                }

                $scope.gettitle($scope.item_id2);

                $scope.campaignDetailDescription['colors'] = $scope.json.campaign_data.Product[$scope.item_id2].Color;
                $scope.campaignDetailDescription['prod_title'] = $scope.val;
                $scope.campaignDetailDescription['f_image'] = $scope.json.campaign_data.Product[$scope.item_id2].f_image;
                $scope.campaignDetailDescription['item_id'] = $scope.item_id2;
                $scope.campaignDetailDescription['item_price'] = $scope.json.campaign_data.Product[$scope.item_id2].price;

            }
            counter++;
        }

现在我的函数只对ng-click执行一次。感谢SO。

Answer 2

避免多次单击事件被触发的经典Javascript方法是将代码包装在超时中。角度版本是：

var timer;
function showDetail() {
  if (timer) {
      $timeout.cancel(timer);
  }
  timer = $timeout(function() {
      // your code
  }, 1000);
}

如果第二个onClick事件在一秒内被触发，它将被取消。

虽然如果我们能看到一个plunkr会很有用，因为你描述的行为不正常。仅使用上述代码作为最后的手段。

ng-click在ng-repeat中执行多次

2 个答案: