CODEWITHSUNDEEP
javascriptangularjs
Mohammad Rayan
Mohammad Rayan

Reputation: 312

ng-change function not updating ng-model value

I have an input like this

<input type="text" name="name" class="form-control" ng-model="val" ng-change="valx()"/>

Controller:

$scope.val= "start";
$scope.valx = function() {
    $scope.val= "done!";
};

However the $scope.val is not updating in the textbox. I am running on angular v1.2.14

Upvotes: 3

Views: 2760

Answers (2)

Weedoze
Weedoze

Reputation: 13943

The code provided is working. The error certainly comes from another part of your code.

Possibilities :

  • Check that you have correctly set your app with ng-app="AppName"
  • Check that you have correctly set your controller with ng-controller="ControllerName"
  • Check that your controller is being use on your page

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.val = "start";
  $scope.valx = function() {
    $scope.val = "done!";
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" name="name" class="form-control" ng-model="val" ng-change="valx()" />
</div>

Upvotes: 2

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

You can't do it. You need a span to display it. Otherwise the value will be overrated on the same text field. 

<input type="text" name="name" class="form-control" ng-model="val" ng-change="valx()"/>
<span>{{result}}</span>

Controller:-

$scope.val="start";
$scope.result= "start";
$scope.valx = function() {
    $scope.result= "done!";
};

Upvotes: 0

Related Questions