CODEWITHSUNDEEP
angularjsdynamicform
sanu
sanu

Reputation: 1068

Angularjs Dynamic Text Fields and multiply two field

Hi I have a Json Like this

[
  {
    "id": 1,
    "name": "Furniture & Fixture",
    "choices": [
      {
        "req_goods": "",
        "qty": "10",
        "rate": "",
        "total": ""
      }
    ]
  },
  {
    "id": 2,
    "name": "Miscellaneous Property",
    "choices": [
      {
        "req_goods": "",
        "qty": "",
        "rate": "",
        "total": ""
      }
    ]
  },
  {
    "id": 3,
    "name": "Office Equipment",
    "choices": [
      {
        "req_goods": "",
        "qty": "",
        "rate": "",
        "total": ""
      }
    ]
  }
]

here choices are my dynamic fields user can add as much choices as they want, my add/remove js is like this

$scope.addNewChoice = function(id){
        $scope.capital_budgets[id].choices.push({});
    };
    $scope.removeChoice = function(parent_id,id) {      
        $scope.capital_budgets[parent_id].choices.splice(id,1);
      };

my html

<div ng-repeat="cb in capital_budgets">
  <div><b><% $index+1 %> <% cb.name %></b></div>                  

  <div ng-repeat="choice in cb.choices">    
    <input type="text" ng-model="choice.req_goods">                 
    <input type="text" ng-model="choice.qty">
    <input type="text" ng-model="choice.rate">
    <input type="text" ng-model="choice.total">

   <button type="button" ng-hide="$first" ng-click="removeChoice($parent.$index,$index)">-</button>

  </div>
  <button type="button" ng-click="addNewChoice($index)">+</button>

</div>

Now I want to calculate the total(qty*rate) of each added choices whenever they put qty and rate and put it in total field please help

Upvotes: 0

Views: 978

Answers (1)

Lex
Lex

Reputation: 7194

One way to accomplish this would be to create a method in your controller to do the calculation and then just call it on a change of qty or rate.

controller:

$scope.updateTotal = function(choice) {
    if(!choice.qty || !choice.rate) {
        choice.total = 0;
    } else {
        choice.total = choice.qty * choice.rate;
    }
};

html:

<input type="text" ng-model="choice.qty" ng-change="updateTotal(choice)">
<input type="text" ng-model="choice.rate" ng-change="updateTotal(choice)">

Upvotes: 2

Related Questions