CODEWITHSUNDEEP
javascriptjqueryangularjs
LL Janneh
LL Janneh

Reputation: 180

Generate dynamic form input fields and collect field data in an array in angularJS

I need to generate form input fields dynamically by clicking 'add sale' button on the form. which is accomplished

Also on change selected drop down, it get the price from the database and use the quantity to calculate the amount of that product.

If I click on 'add sale' button for another form generate the changes affect the previous one.

how to calculate the amount for each form independently and collect the data in it using angularJS?

This is controller

appcat.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location)
{
  //var quan = $scope.quantity;
  $http.get('/api/pproduct').success(function (data)
  {
     $scope.pcategoryA = data;
  });
        
  // this controll the addition and removal
  $scope.choices = [{ id: 'choice1' }];
      
  //any time changes occurr it calculate the Amount 
  $scope.changedValue = function (item,quan)
  {
    if (item != null && quan !=null)
    {
       $http.get('/api/product/'+ item).success(function (data) 
       { // this is the price for that product from the Database
         //this sets amount field
         $scope.amount = parseFloat(data.price * quan);
       });      
    }
  }
    
  // this generate a form
  $scope.addNewChoice = function ()
  {
    var newItemNo = $scope.choices.length + 1;
    $scope.choices.push({ 'id': 'choice' + newItemNo });
  };
    
  // this remove the form
  $scope.removeChoice = function () {
    var lastItem = $scope.choices.length - 1;
    if ($scope.choices.length > 1) {
      $scope.choices.splice(lastItem);
    }
  };
}]);

This is the html

<form class="form-inline" role="form" padding-left:10em">
  <strong class="error">{{ error }}</strong>

  <div class="form-group">
    <label for="name">Invoice No. : </label>
    <input type="text" class="form-control" id="name" ng-model="name" />
  </div>
  
  <br /><hr />
  
  <div ng-controller="MainCtrl">
    <fieldset data-ng-repeat="choice in choices">
      <div class="form-group">
        <label for="name">Quantity :</label>
        <input type="text" class="form-control" id="quantity" ng-model="quantity" />
      </div>
    
      <div class="form-group">
         <div class="form-group">
           <label class="control-label"> Product : </label>
           <select class="form-control" id="selected_id" 
               ng-model="selected_id" 
               ng-options="c.Value as c.Text for c in pcategoryA"
               ng-change="changedValue(selected_id,quantity)">
    
             <option value="">-- Select Category --</option>
           </select>
         </div>
                               
       </div>
    
       <div class="form-group">
         <label for="name">Amount :</label>
         <input type="text" class="form-control" id="amount" ng-model="amount"  ng-readonly="true" />       
       </div>
                               
       <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
       
       <br />
       <hr />
    
     </fieldset>
     <button type="submit" 
             class="col-sm-offset-10 addfields" 
             ng-click="addNewChoice()">
         Add Sale
     </button>
  </div>
</form>

Upvotes: 0

Views: 397

Answers (1)

staskus
staskus

Reputation: 171

You have to put 'amount' in choices array.

$scope.choices = [{ id: 'choice1', amount: 0}];

Then in controller:

$scope.changedValue = function (choise,item,quan)

choise.amount = parseFloat(data.price * quan);

And in tempalte:

ng-change="changedValue(choise,selected_id,quantity)">

<input type="text" class="form-control" id="amount" ng-model="choise.amount"  ng-readonly="true" />

Upvotes: 0

Related Questions