NG单击NG重复多次执行 [英] ng-click executes multiple times in ng-repeat

问题描述

我一直面临着一个意想不到的问题。这里是我的code

I've been facing an unexpected issue. Here is my code

<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：点击（）; 太。但我的问题是，为什么 NG：点击执行三次当我点击一次？我搜索了很多，但没有为我工作。同样的问题，我与 NG-选项和 NG-变化在一起倒是。见下面的例子 -

In my products array, I've 3 products. All things are working fine even ng:click(); too. But my issue is why ng:click executes three times when I click once ? I've searched it a lot but nothing works for me. The same issue I'd with ng-options and ng-change together. See below example -

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

选项进行了适当的到来，在此下拉我 10 条款显示，但是当我选择之一，那么 showChange 函数确实执行 10 倍。谁能帮我？

Options were coming properly, in this drop down I'd 10 items to display, but when I chose one then showChange function did execute 10 times. Can anyone help me?

推荐答案

我发现我的code的又走了多久失败背后的原因。究其原因是，我在我的前pression之一调用函数，那就是

I found a reason behind the failure of my code after a long walk. The reason was, I was calling a function in one of my expression and that was

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

        }

所以，在结合前pression力量发挥作用，以重新评估在每次摘要的每一项功能。相反，调用一个前pression一个功能，我创建值的数组，并在模板中使用它们。像

So binding a function in expression forces that function to be reevaluated for the every item on every digest. Instead of calling a function in an expression, I created an array of values and use them in template. Like

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

但要prevent多次呼吁，我们需要添加监视监听器此变量的函数或添加计数器vairable 。我做了一个柜台，现在我的函数看起来像

But to prevent multiple times calling a function we need to add a watch listener to this variable or add a counter vairable. I made a counter and now my function looks like

$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-点击。由于 SO 。

Now my function is executing only once for ng-click. Thanks to SO.

这篇关于NG单击NG重复多次执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！