Dynamic property on JavaScript object getting null

Question

I'm trying to set the dynamic property on a javascript object using the ng-model. But I'm unable to create it as I always get null for that property. I have different ways to copy the value from the variable self.username to self.params javascript object in the below code.

Please see this plnkr

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//code.angularjs.org/1.2.26/angular.js"></script>
  <script src="https://code.angularjs.org/1.2.26/angular-route.min.js">
  </script>
  <script src="app.js"></script>
  <script src="routes.js"></script>
</head>

<body>
  <a href="#/carriers">Carriers</a>

  <div class="mainContainer" ng-view></div>
</body>

</html>

routes.js

myApp.config(function($routeProvider) {
  $routeProvider
    .when('/carriers', {
      templateUrl: 'carriers.html',
      controller: 'MainCtrl',
      controllerAs: 'mainCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
});

Carriers.html

<input type="text"  placeholder="username" ng-model="mainCtrl.username" />
<button  ng-click="mainCtrl.login()">Login</button>

app.js

var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('MainCtrl', function() {
  var self = this;
  self.username = '';
  self.login = login;
  self.params = {
    username: self.username //doesnt work
  };
  //self.params.username=angular.copy(self.username);    //doesnt work
  //self.params['username']=self.username; //doesnt work
  function login() {
    //   alert(self.username);
    console.dir(self.username); // works
    console.dir(self.params); // username:'' getting empty string for username property
  }
});

cnorthfield · Accepted Answer · 2016-09-06 21:25:39Z

1

The value does not update because you created a new object and set the value of self.params.username to the value of self.params. self.params.username does not reference self.params it was just set from the value when the object was created.

If you want to bind self.params.username to the input then you can change your input model to:

<input type="text"  placeholder="username" ng-model="mainCtrl.params.username" />

Another alternative is to watch self.username and set the value of self.params.username to the new value using $watch

// watch mainCtrl.username for any changes
$scope.$watch('mainCtrl.username', function(newValue, oldValue) {

    // set self.params.username from the new value
    self.params.username = newValue;

});

edited Sep 6, 2016 at 21:25

answered Sep 6, 2016 at 21:09

cnorthfield

3,51119 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

JJJ Over a year ago

"Works for me" isn't a very useful answer.

Koushik Ravulapelli Over a year ago

@papakia sorry for terminology I actually meant empty string. I need actual value instead of empty string

cnorthfield Over a year ago

@koushikR No problem! Does my answer help you understand the problem?

cnorthfield Over a year ago

@Juhana Why the down vote? I know it was not right to include the words "Works for me" in my answer but I amended it straight away

Koushik Ravulapelli Over a year ago

Yes, it did thnx!! @papakia

|

Collectives™ on Stack Overflow

Dynamic property on JavaScript object getting null

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related