Friday, September 9, 2016

AngularJS two way data bindings

You want to do some expression based on some input. and then you want to bind this expression result in a different textbox and later you want to do some expression with this result textbox.

then, here you are.



Here is the code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"> </script>
</head>

<body ng-app="myApp" ng-controller="myController">

  <label>Set the first number: <input type="text" ng-model="number1"/></label><br />
  <label>Set the last number: <input type="text" ng-model="number2"/></label>
 <br />
  <br /><br />
  <br />

  <label>result: <input type="text" ng-model="result" ng-bind="getResult()"/></label>

  <br />
  <br /><br />
  <br />

  <strong>result in later use:</strong> {{result}}

</body>





<script type="text/javascript">

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

var controller = app.controller("myController",jewel);

function jewel($scope)
{

$scope.number1=5;
$scope.number2 = 4;

$scope.result = $scope.number1  + $scope.number2;

$scope.getResult = function(){
$scope.result = Number($scope.number1)  + Number($scope.number2);
};

}

</script>
</html>



working fiddle: JSFiddle