1

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?

0

1 Answer 1

2

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

Sign up to request clarification or add additional context in comments.

1 Comment

It is working fine,very clear explanation too,Thank you for your time and effort. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.