Search code examples
angularjsangular-ngmodel

Get value of ngModel inside ngChange function


Given an input with ngModel, how can i get the viewValue inside ngChange function?

<input type="text" ng-model="getMyObject().value" ng-change="insert(1, 'my object property')" />

I have tried:

<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />

But return undefined.


Solution

  • Check this example and verify your code:

    var app = angular.module('myApp', []);
    
    app.controller('MainCtrl', function($scope) {
      $scope.list = [1, 5, 7];
    
      $scope.myObj = {value: 10};
    
      $scope.getMyObject = function() {
        return $scope.myObj;
      }
      
      $scope.insert = function(pos, value) {
        $scope.list.push(value);
      }
      
    });
    <!DOCTYPE html>
    <html ng-app="myApp">
      <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <link rel="stylesheet" href="style.css" />
        <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
        <script src="app.js"></script>
      </head>
      <body ng-controller="MainCtrl">
        <p>Hello {{name}}!</p>
        
        <input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
        
        <br>
    
        <pre>myObj = {{myObj|json}}</pre>
        <pre>list = {{list|json}}</pre>
      </body>
    </html>

    The property name to which is bound your ng-model directive must be accessible: it has to be referred to an object in the scope.