JavaScript對象的動態屬性為空

Question

我正在嘗試使用ng-model在javascript對象上設置dynamic屬性。 但是我無法創建它，因為我總是會為該屬性獲取null。 在以下代碼中，我有不同的方法將值從變量self.username復制到self.params javascript對象。

請看這個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
  }
});

Answer 1

該值不更新，因為你創造了一個新的對象和值設置self.params.username到的值self.params 。 self.params.username不引用self.params它只是從創建對象時的值開始設置的。

如果要將self.params.username綁定到輸入，則可以將輸入模型更改為：

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

另一種選擇是監視self.username並使用$watch將self.params.username的值設置為新值

// 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;

});

JavaScript對象的動態屬性為空

問題描述

1 個解決方案

解決方案1
1 已采納 2016-09-06 21:09:15

JavaScript對象的動態屬性為空

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-06 21:09:15

解決方案1
1 已采納 2016-09-06 21:09:15