Dynamic form Angular issue

Question

I have written this code online dynamic form jsFiddle code

The total and grand total are not auto updating. I had a more simple example before and it was working with a single model item, but then I made an array and now it won't work. My real program I am building is going to have many more fields and I am trying to create a pre-example to show it will work. Can someone quickly see what dumb thing I am forgetting?

<div ng-controller="MyCtrl">
    <form name="myForm">
      <div ng-repeat="item in items track by $index">
          <input type="text" ng-model="item.a">
          <input type="text" ng-model="item.b">
          <input type="text" ng-model="item.c">
          <label>Total: </label><label ng-bind="total(item)"></label>
      </div>
    </form>
    <div>
    <label>Grand Total: </label><label ng-bind="grandTotal()"></label>
    </div>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
        $scope.items = [
      {
        a: 0, b: 0, c: 0
      },
      {
        a: 0, b: 0, c: 0
      }];

    $scope.total = function(item) { 
        var result = item.a * item.b * item.c;

      return isNaN(result) ? 0 : result;
    };

    $scope.grandTotal = function() { 
        var result = 0;

      angular.forEach($scope.items, function(item) {
        result += $scope.total(item);
      });

      return isNaN(result) ? "" : result.toString();
    };
});

Pankaj Parkar · Accepted Answer · 2016-07-25 14:54:54Z

1

ng-bind should be without $scope. You don't need to mention $scope in view bindings, it directly refers to $scope/this(context) of controller.

Other than that additionally change all input's ng-bind to ng-model to enable two way binding over all input fields.

Markup

<input type="text" ng-model="item.a">
<input type="text" ng-model="item.b">
<input type="text" ng-model="item.c">

ng-bind="total(item)"

Forked JSFiddle

edited Jul 25, 2016 at 14:54

answered Jul 25, 2016 at 14:44

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Zach Over a year ago

Good catch, but even with $scope removed, I don't see it displaying the totals

Zach Over a year ago

He should change the ng-bind to ng-model for his <input>. Add this to your answer.

kyleb Over a year ago

I updated fiddle jsfiddle.net/Lhkedykz/15. It still doesn't work. It calls my total function at the start but never again after I start typing in values.

kyleb Over a year ago

Zach please write up answer and I will mark it answer.

Pankaj Parkar Over a year ago

@Zach Thanks for heads up as well. after answering I got busy with something else. And then I edited comment & saw fiddle. Thereafter I realize about ng-bind are there on input fields.. Thank you once again :)

Kunal Mazumdar · Accepted Answer · 2016-07-25 15:04:22Z

1

Use

<input type="text" ng-model="item.a">

instead of

<input type="text" ng-bind="item.a">

Updated fiddle http://jsfiddle.net/Lhkedykz/17/

answered Jul 25, 2016 at 15:04

Kunal Mazumdar

637 bronze badges

Collectives™ on Stack Overflow

Dynamic form Angular issue

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related