angularjs - How to dynamically change input value -


i'm trying show editable results users, show them through input field. basic example of i'm doing:

<div class="form-group">     <label>first number</label>     <input type="text" ng-model="first" ng-required="true" class="form-control"> </div>  <div class="form-group">     <label>second number</label>     <input type="text" ng-model="second" ng-required="true" class="form-control"> </div>  <div class="form-group">     <label>the sum is: {{first + second }}</label>     <input type="text" ng-model="result" ng-required="true" class="form-control"> </div> 

in result's div, used label test if result being obtained correctly, , is. if edit first or second values, input's result doesn't update.

this controller used (yeah, form in modal):

var modalinstancectrl = function ($scope, $modalinstance) {     $scope.result = $scope.first + $scope.second;     $scope.confirm = function () {       $modalinstance.close(result);    };     $scope.cancelnewbet = function () {       $modalinstance.dismiss('cancel');    }; }; 

i thought value supposed automatically updated once define how obtained. misses change result through script...

thanks in advance.

what want happen when user edits results input? want data binding break (i assume not , ignore possibility)? want 1 of inputs adjust proper value?

if want display output, this, in controller:

$scope.result = function() { return $scope.first + $scope.second; } 

and in view:

{{ result() }} 

but if want user able edit result , (let's say) have second assigned (result - first), you'd want in view (by way, note type="number"):

<input type="number" ng-change="adjustresult()" ng-model="first"> <input type="number" ng-change="adjustresult()" ng-model="second"> <input type="number" ng-change="adjustinput()" ng-model="result"> 

and in controller:

$scope.adjustresult = function() {   $scope.result = $scope.first + $scope.second; }; $scope.adjustresult(); // initialize result  $scope.adjustinput = function() {   $scope.second = $scope.result - $scope.first; } 

Comments

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -