以ng-repeat顯示數量

我正在使用AngularJS和ng-repeat來向用戶顯示一些產品。用戶可以將這些產品添加到他/她的訂單中。現在，當此用戶訂單中的產品數量不等於0時，必須顯示此數量。如果數量爲0，則必須顯示a +。喜歡的東西：以ng-repeat顯示數量

enter image description here

我能夠將產品添加到$ scope.order。當他點擊'+'或者1時顯示正確的數量。但是當用戶改變標籤並返回到先前的標籤時，數量必須顯示，而不是'+'。該產品適量仍然在$ 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;    
      } 
     }

這又如何解決呢？

來源

2015-06-09 Sesamzaad

由於某種原因，你正在做的DOM操作的控制器....使用原始的JavaScript ...這是JS也不怎麼角應該要使用的。 –

是的，我知道這就是爲什麼我尋找一個合適的解決方案？ – Sesamzaad

從我看到你的代碼適合angularjs。

爲了解決你的問題，我建議你：

1）完全搞定它

2）$ event.currentTarget.innerHTML擺脫每一行創建一個函數來獲得訂單項目的數量。喜歡的東西

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

來源

2015-06-09 09:40:49

這正是我需要的，謝謝！ – Sesamzaad

爲什麼使用一個新的函數，而它已經有'aantal'屬性？ – devqon

因爲訂單記錄不是「產品」記錄。參考 $ scope.order.push（{prodid：$ scope.prodid，prodname：$ scope.prodname，aantal：1，price：$ scope.price，size：'M'，extras：''}）; –

只需使用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>

來源

2015-06-09 09:39:05 devqon

只是要包含控制器和數據綁定到對產品的計數的變量。

編輯：什麼devqon說。

來源

2015-06-09 09:40:02 MortenJorgensen

以ng-repeat顯示數量

回答

相關問題