CODEWITHSUNDEEP
javascriptphpjqueryangularjsinput
gsk
gsk

Reputation: 2379

Find total from inputs which are created by dynamically in angularJs

I am creating group of inputs elements dynamically in angularJs. I want to find total, Controller,

     $scope.itemElements = [
                {
                    "item": "item1",
                    "quantity": 2,
                    "rate": 12.5
                },
                {
                    "item": "item2",
                    "quantity": 2,
                    "rate": 12.5
                },
                {
                    "item": "item3",
                    "quantity": 2,
                    "rate": 12.5
                }
            ];
$scope.calculateSum = function ()
        {
            var sum = 0;
            for (var i = 0; i < $scope.itemElements.length; i++)
            {
                sum += $scope.itemElements["quantity"];
            }

            return sum;
        }

HTML,

 <tr ng-repeat="itemElemen in itemElements">
                <td><input type="text" class="form-control" ng-model="itemElemen.item" placeholder="Enter item" list="clientList"/></td>
                <td><input type="text" class="form-control" ng-model="itemElemen.quantity" placeholder="Quantity"/></td>
                <td><input type="text" class="form-control" ng-model="itemElemen.rate" placeholder="Rate"/></td>
                <td><input type="text" class="form-control" placeholder="Amount" ng-value="itemElemen.quantity*itemElemen.rate"/></td>
            </tr>

Totatl,

 Total &nbsp;<span id="totalSum" ng-model="calculateSum()"></span>

It is not working,getting error is [ngModel:nonassign], How can I do the same?

Upvotes: 1

Views: 1171

Answers (1)

ababashka
ababashka

Reputation: 2101

You have a few errors in your code.

At first, <span id="totalSum" ng-model="calculateSum()"></span> - this code is not valid, here you get your error. Better way is to output by value using 2-way-data-binding:

Total &nbsp;<span id="totalSum">{{calculateSum()}}</span>

After, in your functioncalculateSum() you have an error

  $scope.calculateSum = function ()
  {
    var sum = 0;
    for (var i = 0; i < $scope.itemElements.length; i++)
    {
      sum += $scope.itemElements[i]["quantity"];
      //                         ^
      //                        Here
    }
    return sum;
  }

You need to refer to element from Array $scope.itemElements

After, better way is to use input:number instead of input:text for models which you really know are Numbers

And the last, input for Amount is better to be disabled.

Finally, get next code.
HTML: 

<table>
  <tr ng-repeat="itemElemen in itemElements">
     <td><input type="text" class="form-control" ng-model="itemElemen.item" placeholder="Enter item" list="clientList"/></td>
     <td><input type="number" class="form-control" ng-model="itemElemen.quantity" placeholder="Quantity"/></td>
     <td><input type="number" class="form-control" ng-model="itemElemen.rate" placeholder="Rate"/></td>
     <td><input type="number" disabled class="form-control" placeholder="Amount" ng-value="itemElemen.quantity*itemElemen.rate"/></td>
  </tr>
</table>
 Total &nbsp;<span id="totalSum">{{calculateSum()}}</span>

JS:

  $scope.itemElements = [
    {
      "item": "item1",
      "quantity": 2,
      "rate": 12.5
    },
    {
      "item": "item2",
      "quantity": 2,
      "rate": 12.5
    },
    {
      "item": "item3",
      "quantity": 2,
      "rate": 12.5
    }
  ];

  $scope.calculateSum = function ()
  {
    var sum = 0;
    for (var i = 0; i < $scope.itemElements.length; i++)
    {
      sum += $scope.itemElements[i]["quantity"];
    }
    return sum;
  }

Demo: http://plnkr.co/edit/k2zrbNcMXwPhNcflV3yF?p=preview

Upvotes: 2

Related Questions