show quantity in ng-repeat

Question

I am using AngularJS and a ng-repeat in order to show some products to the user. The user is able to add these products to his/her order. Now when the quantity of a product in this users order is different from 0 this amount has to be shown. If the quantity is 0 then a + has to be shown. Something like:

I am able to add the products to a $scope.order. And the right quantity gets shown when he clicks on the '+' or on the 1. But when the user changes tabs and comes back to the previous tab, the quantitys have to be shown and not a '+' everywhere. the right amount of that product is still in $scope.order but I don't know how I can show this amount for each product when the tab gets loaded...

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

How can this be solved?

Answer 1

From what I see your code is suitable for angularjs.

To solve your issues I suggest you:

1) Completely get rid of every line with $event.currentTarget.innerHTML in it

2) Create a function to get the number of item in order. Something like

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

And then in the view

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

Answer 2

Just use the product.aantal variable:

<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

Just make a variable containing the product count on the controller and databind to that.

EDIT: What devqon said.