current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite
1

I am trying to allow users to add quantity into text box. I have products array and each product contains its property. My service contains array list.

products = [{
   id: 1,
   name: 'X Product',
   face: 'img/x_p.png',
   available_size: 6,
   color_available: 0,
   sizes: ['10"', '20"', '30"'],
   properties: [{size: '10"', mrp: '10$'},
              {size: '20"', mrp: '15$'},
              {size: '30"', mrp: '20$'}]
 },
 {
   id: 2,
   name: 'Y Product',
   face: 'img/y_p.png',
   available_size: 6,
   color_available: 0,
   sizes: ['10"', '20"', '30"'],
   properties: [{size: '10"', mrp: '10$'},
              {size: '20"', mrp: '15$'},
              {size: '30"', mrp: '20$'}]
}]

Iterating through the products array. When user clicks on product it will display a product show page. where I am showing all the information for the product. For properties I am showing a table where user can add their quantity just after each size.

<div style="margin-bottom: 20px;">
  <h4>
    Product Detail
  </h4>
  <table>
    <tbody>
      <tr class="tableHeader">
        <td>Size</td>
        <td>MRP</td>
        <td>Quantity</td>
      </tr>
      <tr ng-repeat="(key, property) in product.properties">
        <td>{{  property['size']  }}</td>
        <td>{{  property['mrp']  }}</td>
        <td>
          <input type="number" placeholder="QTY" ng-model="qty">
        </td>
        <td>
          <a href="javascript:;" class="button" ng-click="addToCart(property['size'], qty)">
        Add
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Question: So according to this table each row contains a button with name add. So after adding quantity user clicks on add button will them allow to add item in cart. here I am getting size in addToCart function but got undefined qty as it should be an array with its respective size. Though I am getting size. But I don't know how to do that.

$scope.addToCart = function(size, qty) {
  alert($scope.qty)
}

I need a help.

share|improve this question
    
you should alert(qty) and see if the parameter values are ok – BorcheIvanov Jul 15 at 6:42
    
@BorcheIvanov same result – SSR Jul 15 at 6:43
    
I am getting size but not getting an qty – SSR Jul 15 at 6:45
up vote 1 down vote accepted 

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function() {
  this.addToCart = function(property, qty) {
    property["qty"] = qty;
  }
  this.product = {
    id: 1,
    name: 'X Product',
    face: 'img/x_p.png',
    available_size: 6,
    color_available: 0,
    sizes: ['10"', '20"', '30"'],
    properties: [{
      size: '10"',
      mrp: '10$'
    }, {
      size: '20"',
      mrp: '15$'
    }, {
      size: '30"',
      mrp: '20$'
    }]
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="margin-bottom: 20px;" ng-app="MyApp">
  <div ng-controller="MyCtrl as ctrl">
    <h4>
    Product Detail
  </h4>
    <table>
      <tbody>
        <tr class="tableHeader">
          <td>Size</td>
          <td>MRP</td>
          <td>Quantity</td>
        </tr>
        <tr ng-repeat="(key, property) in ctrl.product.properties">
          <td>{{ property['size'] }}</td>
          <td>{{ property['mrp'] }}</td>
          <td>
            <input type="number" placeholder="QTY" ng-model="qty">
          </td>
          <td>
            <a href="javascript:;" class="button" ng-click="ctrl.addToCart(property, qty)">
        Add
          </a>
          </td>
        </tr>
      </tbody>
    </table>
    <hr/>
    {{ctrl.product.properties}}
  </div>
</div>

share|improve this answer
    
Should I use ctrl or I can stick with my controller. I mean I am using my own controller then will this work or I can define with $scope? – SSR Jul 15 at 6:54
    
You can use your controller, just define a variable (alias) fr it and use that, then you wont need $scope. See how i have ucreated the scope of MyCtrl and then used ctrl. notation – Himanshu Tyagi Jul 15 at 6:56
    
Great & very quick answer :) Thanks for the help. – SSR Jul 15 at 7:09
1  
Happy to help :) – Himanshu Tyagi Jul 15 at 7:09
up vote 0 down vote

I have noticed many times that the textbox won't bind to a normal scope variable like

$scope.qty and binding it in view with ng-model="qty"

Please try using something like

$scope.qty = { text:' ' }

and bind it as ng-model="qty.text" in the view

which will make sure that your textbox is actually bound.

share|improve this answer
up vote 0 down vote

Simple thing to fix this issue: init qty by $scope.qty = 0;

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.