2016-09-06 10 views
0

我试图在使用ng模型的javascript对象上设置动态属性。但我无法创建它,因为我总是为该属性获取空值。我有不同的方法将值从变量self.username复制到下面的代码中的self.params javascript对象。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 
    } 
}); 

回答

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.usernameself.params.username值设置为使用新的值$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; 

}); 
+0

“适合我”不是一个非常有用的答案。 – JJJ

+0

@Juhana谢谢,编辑了我的答案。 – cnorthfield

+1

@papakia抱歉的术语我实际上是指空字符串。我需要实际值而不是空字符串 – CodingFreak