javascript - Having trouble using ngChange to update model -
i started learning basics of angular. i'm attempting making annual salary converter, fun. i'm having difficulty monthly ng-model updating when yearly model changed user. fields input tags. here code
<!doctype html> <html ng-app="salaryapp"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container" ng-controller="converter"> <h1>salary converter</h1> <div class="form-group"> <label>annual salary</label> <input type="number" class="form-control" placeholder="0" ng-model="yearly" ng-change="recalculate()" > <br> <label>monthly salary</label> <input type="number" class="form-control" placeholder="0" ng-model="monthly" disabled> </div> </div> <!--<div ng-controller="converter"> write text in textbox: <input type="text"> <h1>hello {{ yearly }}</h1> <h1>hello {{ monthly }}</h1> </div>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <!--<script src="salaryconverter.js"></script>--> <script type="text/javascript"> var app = angular.module('salaryapp', []); app.controller('converter', function($scope) { $scope.yearly = 80000; console.log("log1"); $scope.monthly = $scope.yearly / 12; console.log("log2"); function recalculate() { console.log("function run"); return $scope.yearly /12.00; } }); </script> </body> </html> here plnkr http://plnkr.co/edit/26y0jrr7ivcrloblm7d2?p=preview
youe need use scope property. here :
function recalculate() { console.log("function run"); return $scope.yearly /12.00; } should
$scope.recalculate = function () { console.log("function run"); $scope.monthly=$scope.yearly /12.00;//don't return, neet assign }
Comments
Post a Comment