Question

我正在使用AngularJS和ng-repeat来向用户展示一些产品。用户可以将这些产品添加到他/她的订单中。现在，当此用户订单中的产品数量与0不同时，必须显示此金额。如果数量为0则必须显示+。类似的东西：

enter image description here

我可以将产品添加到$ scope.order。当他点击＆＃39; +＆＃39;时会显示正确的数量。或者在1.但是当用户更改标签并返回上一个标签时，必须显示数量而不是＆＃39; +＆＃39;到处。适当数量的产品仍然在$ scope.order但我不知道如何在标签加载时为每个产品显示这个数量...

HTML

   <!-- CATEGORY 1 -->    
    <ons-template type="text/ons-template" id="lattes.html">
      <ons-carousel swipeable overscrollable auto-scroll style="height: 100%; width: 100%;">
        <ons-carousel-item>  
          <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: 30px; 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($event,product.name, product.id, product.price)">+</a></li>
                 <li style="width:65%; float:left; padding-left:5px;">
                    <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>
                 <li style="width: 15px; height:53px; float:right; padding:7px 4px 0 6px; text-align:right; font-size:30px; color:gray; font-weight:thin; border-left:1px solid #ddd;"><a href="#" id="aantal" style="padding-top:10px;" ng-click="productRemove($event, product.id, product.name)">-</a></li>                    
                </ul>
            </ons-list-item>
          </ons-list>
      </ons-carousel-item>
        </ons-carousel>
    </ons-template>

AngularJS

//COMPOSE ORDER ADD/REMOVE/UPDATE 
    $scope.productRemove = function($event, pid, pname){
        $scope.productid = pid;

        //products.remove(pname);
        //alert(products.getAll(pname));

        if($scope.order.length > 0)
        {
            for(var b = 0; b<$scope.order.length;b++){
               if($scope.order[b].prodid == pid)
               {
                   if($scope.order[b].aantal > 1)
                   {
                      $scope.order[b].aantal--;
                      document.getElementById('aantal').innerHTML = document.getElementById('aantal').innerHTML - 1;
                   }
                   else
                   {
                       $scope.order.splice(b,1);
                       document.getElementById('aantal').innerHTML = '+';
                       //update quantity in app UI!
                   }
               }
            }
        }
    }
    $scope.productAdd = function($event,pname, pid, pprice) {
        $scope.pzelfdeid = -1;
        $scope.pzelfde = -1;
        $scope.prodname = pname;
        $scope.prodid = pid;
        $scope.price = pprice;

        //ADD SERVICE
        //products.add(pname);
        //alert(products.getAll(pname));

        if($scope.order.length == 0){
            $scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1, price: $scope.price, size: 'M', extras: ''});
            $event.currentTarget.innerHTML = 1;
        }        
        else if($scope.order.length > 0){
            for(var b = 0; b<$scope.order.length;b++)
            {
                if($scope.order[b].prodid == pid)
                {
                    $scope.pzelfdeid = $scope.order[b].prodid;   
                    $scope.pzelfde = b;
                }
            }
            if($scope.pzelfde > -1)
            {
                $scope.order[$scope.pzelfde].aantal++;
                $event.currentTarget.innerHTML = $scope.order[$scope.pzelfde].aantal;             
            }
            else
            {
                $scope.order.push({prodid: $scope.prodid, prodname: $scope.prodname, aantal: 1, price: $scope.price, size: 'M', extras: ''});
                $event.currentTarget.innerHTML = 1;               
            }
        }

如何解决这个问题？

Answer 1

从我看到你的代码适用于angularjs。

为了解决您的问题，我建议您：

1）使用$ event.currentTarget.innerHTML完全摆脱每一行

2）创建一个函数来按顺序获取项目数。像

这样的东西

$scope.getNumberFromOrder = function (pid) {
     for(var b = 0; b<$scope.order.length;b++) {
         if($scope.order[b].prodid == pid) {
             return $scope.order[b].aantal;
         } 
     }
     return '';
}

然后在视图中

<a href="#" id="aantal" style="padding-top:10px;" ng-click="productAdd($event,product.name, product.id, product.price)">{{ getNumberFromOrder(product.id) || '+' }}</a>

Answer 2

只需使用product.aantal变量：

<li>
    <a href="#" id="aantal" ng-click="productAdd($event,product.name, product.id, product.price)">
        <!-- If aantal == null or 0 then fallback to '+' -->
        {{ product.aantal || '+' }}
    </a>
</li>

Answer 3

只需在控制器上创建一个包含产品计数的变量，然后数据绑定到该变量。

编辑：devqon说的是什么。

以ng-repeat显示数量

3 个答案: