Add change amount and change the Total in Check Box in Ionic

Question

I created a list in Checkbox, listing products where the user can choose a product. I need add in the product list an option where the user can change the quantity of products selected. How I can do it?

My View:

<ion-view view-title="Bebidas Adicionais" ng-controller="exBebidasCtrl" >     

 <div class="bar bar-subheader">
      <h2 class="title">{{'Sub-Total R$ ' + getTotalSelected()}}</h2>
</div>

        <ion-refresher pulling-text="Puxe para atualizar..."  on-refresh="doRefresh()"></ion-refresher>
        <ion-list class="card list">
            <div class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="search" ng-model="q" placeholder="Procurar" aria-label="filter bebidasextras" />
            </div>
        </ion-list>

   <ion-list>

       <div ng-repeat="bebida in bebidasextras">
          <ion-checkbox ng-model="bebida.selected" > 
              <h2>{{bebida.ad_bebida_titulo}}</h2>     
              <p>R$ {{bebida.ad_bebida_valor}}</p>
          </ion-checkbox>
       </div>  
</ion-list>      

            <button class="button button-block button-balanced">
                <a  ng-click="addToCart(bebida.ad_bebida_titulo,bebida.ad_bebida_valor)" class="button button-assertive button-clear icon ion-android-cart"> Continuar Comprando </a> 
            </button>     
    </ion-content>

My Controller:

    $scope.bebidasextras = [];

var promise = $http.get('http://nhac.esy.es/api_carrinho/lista_bebida_extra.php?json=restaurantes')
  .success(function(retorno) {
    console.log(retorno);
    $scope.bebidasextras = retorno; // não precisa fazer retorno.data

        $scope.user = {
            bebidasextras: [$scope.bebidasextras[1]]
          };
          $scope.checkAll = function() {
            $scope.user.bebidasextras = angular.copy($scope.bebidasextras);
          };
          $scope.uncheckAll = function() {
            $scope.user.bebidasextras = [];
          };
          $scope.checkFirst = function() {
            $scope.user.bebidasextras = [];
            $scope.user.bebidasextras.push($scope.bebidasextras[0]);
          };
          $scope.setToNull = function() {
            $scope.user.bebidasextras = null;
          };

      $scope.getTotalSelected = function() {
      var total = 0;

      for(var i = 0; i < $scope.bebidasextras.length; i++){
        var bebida = $scope.bebidasextras[i];
        total += bebida.selected ? Number(bebida.ad_bebida_valor) : 0;
      }

      return total;
    }

})
.error(function(erro) {        
    console.log(erro);
});

score 1 · Accepted Answer · answered Aug 09 '16 at 16:02

1

You can have an input box having a + and - button. Clicking upon which user can change the quantity of product selected.

If you can share some more details probably I would be able to answer in a better way.

answered Aug 09 '16 at 16:02

Jayesh

110
1
7

Yes, is this way I need. But, I can't do this in the Check Box. – Ramos Aug 09 '16 at 16:06
1

You can have it right aligned with + and - buttons with selection (checkbox) at left. I think that is how most of the mobile apps handle the product count. – Jayesh Aug 09 '16 at 16:11
I changed my mind, I think that is than better: http://stackoverflow.com/questions/38860396/how-create-an-input-box-having-a-and-button-in-ionic – Ramos Aug 09 '16 at 22:08
1

@Ramos: glad you found that. Pretty similar but yeah much better than input box. Happy Coding! – Jayesh Aug 10 '16 at 12:38
Thank you! Great! – Ramos Mar 28 '17 at 14:45

Add change amount and change the Total in Check Box in Ionic

1 Answers1