Updating a value based on a range of inputs in AngularJS

Question

What I am essentially trying to achieve here is to have a remaining amount that decreases in amount as the user enters the amount in to a series of text fields.

These text fields are generated by an angular loop and its the remainingAmount var that I need to be updated, so if for example the fresh remaining amount if 40 then a user enters 10 into field 1 then the remaining amount becomes 30 all the way until 0.

    <div class="row">
            <div class="col text-center error">
                <span ng-model="remainingAmount">{{ remainingAmount }}</span> left to distribute
            </div>
        </div>
    </div>

    <div class="list">

        <div class="item item-button-right" ng-repeat="user in users">
            {{ user.first_name }} {{ user.last_name }}
            <span class="item-note">
                <input type="text"  />
            </span>
        </div>

    </div>

Plunk: http://plnkr.co/edit/NmwTfGNC7jJyRL1kADCJ

Create a Plunkr or JSFiddle please

Coder
– Coder

2015-06-03 11:03:41 +00:00
Commented Jun 3, 2015 at 11:03 — Coder
– Coder, Commented Jun 3, 2015 at 11:03
Updated the question with a link to the plunk

ChrisBratherton
– ChrisBratherton

2015-06-03 11:25:44 +00:00
Commented Jun 3, 2015 at 11:25 — ChrisBratherton
– ChrisBratherton, Commented Jun 3, 2015 at 11:25

eladcon · Accepted Answer · 2015-06-03 11:47:30Z

1

Try to bind the inputs to your model. Then you could calculate the remaining on change of one of the inputs:

HTML:

<input type="text" ng-model="user.amount" ng-change="calc()" />

JS:

$scope.calc = function() {
  var total = 0, user;
  for (user in $scope.users) {
    total += parseInt($scope.users[user].amount, 10) || 0;
  }
  $scope.remainingAmount = Math.max($scope.startAmount - total, 0);
}

See this plunker

answered Jun 3, 2015 at 11:47

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

Comments

sirrocco · Accepted Answer · 2015-06-03 11:53:07Z

0

A simple example with no validation or anything (not sure why you're using an object as an array .. so I switched to using an array - also changed the input from text to number to avoid having to re-parse the number since angular would set the property as string) :

plunkr

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

app.controller('MainCtrl', function($scope) {
    var maxAmount = 40;
    $scope.remainingAmount = maxAmount;
    $scope.users = [
        {'id':1, 'first_name':'Joe', 'last_name': 'Bloggs', amountUsed: 0},
        {'id':2, 'first_name':'Chris', 'last_name': 'Scott', amountUsed: 0}
    ];

    $scope.updateUsage = function(){
      var totalUsed = 0;

      for (var i = 0; i < $scope.users.length; i++) {
        var u = $scope.users[i];
        totalUsed += u.amountUsed;
      }

      $scope.remainingAmount = maxAmount - totalUsed;
    }
});

answered Jun 3, 2015 at 11:53

sirrocco

8,0294 gold badges63 silver badges83 bronze badges

3 Comments

ChrisBratherton Over a year ago

That object as an array was just my typo :) This works perfectly! Thanks

ChrisBratherton Over a year ago

just one more question on this, how can I set the inputs to have a default value of 0 as currently if one is updated and the others are not then this results in a NaN in the remainingTotal var. I have tried setting the value=0 on the text field but this doesn't appear to make a difference.

sirrocco Over a year ago

if you run the plunkr that's exactly how it works, they default to 0

Collectives™ on Stack Overflow

Updating a value based on a range of inputs in AngularJS

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related