AngularJS Expression of multiple inputs

Question

I really didnt know how to title this question:

Is it possible to do this only with AngularJS?:

<input ng-model="number1">
<input ng-model="number2">
<input ng-model="sum" value='{{number1 + number2}}'>

<h1>Multiply sum by 2 NOT WORKING: {{sum * 2}}</h1>

https://jsfiddle.net/fthnvv5s/

I hope you got the point, and will be very grateful not to downgrade me, and yes, I know i can use jQuery.

alphapilgrim · Accepted Answer · 2017-01-17 20:10:36Z

3

There are many ways to do this, here's one way. Hope it helps.

function exampleController($scope) {
  $scope.number1 = 0;
  $scope.number2 = 0;
  $scope.$watchGroup(['number1','number2'], function(newval){
    if(!newval) return;
    $scope.sum = parseInt(newval[0]) + parseInt(newval[1]);
  });
}

angular
  .module('example', [])
  .controller('exampleController', exampleController);

.row {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
  <div class="container" ng-controller="exampleController">
    <input class="row" ng-model="number1">
    <input class="row" ng-model="number2">
    <input class="row" ng-model="sum">

    <h1>Multiply sum by 2: {{sum * 2}}</h1>
  </div>
</div>

answered Jan 17, 2017 at 20:10

alphapilgrim

3,97510 gold badges33 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Expression of multiple inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related