使用 'controller as' $scope angularJS 从对象模型访问值
accessing values from an object model using 'controller as' $scope angularJS
我正在尝试获取 user.firstName 和 user.lastName,为这些模型添加一个手表集合,然后吐出一个用户名。
我似乎无法在两者之间进行交流,我认为我使用的是 scope 和 self 不正确。我很新,误解了这两个概念。
并且因为我遇到了错误,从 $user
对象中获取 lastName
和 firstName
并将某些内容返回到视图的正确方法是什么?
我正在使用 'controller as' 语法。请提供任何指导。
HTML
<input ng-model="ctrl.user.firstName" required>
<input ng-model="ctrl.user.lastName" required>
<input type="text" value="{{userName}}" name="user_name" ng-model="ctrl.user.userName">
JS
var self = this
$scope.$watchCollection('[user.firstName, user.lastName]', function () {
if (self.user.firstName != '' && self.user.lastName != '') {
$scope.userName = self.user.firstName + '_' + self.user.lastName + '_' + Math.floor((Math.random() * 100000) + 1);
$scope.user.userName.$setViewValue($scope.userName);
}
});
$watchCollection 是针对范围进行评估的,因此您需要:
var self = this
self.user = {};
$scope.$watchCollection('[ctrl.user.firstName, ctrl.user.lastName]', function () {
if (self.user.firstName != '' && self.user.lastName != '') {
$scope.userName = self.user.firstName + '_' + self.user.lastName + '_' + Math.floor((Math.random() * 100000) + 1);
self.user.userName.$setViewValue($scope.userName);
}
});
此外,我认为您不必担心使用 $setViewValue,只需更改为:
$scope.$watchCollection('[ctrl.user.firstName, ctrl.user.lastName]', function () {
if (self.user.firstName != '' && self.user.lastName != '') {
self.user.userName = self.user.firstName + '_' + self.user.lastName + '_' + Math.floor((Math.random() * 100000) + 1);
}
});
和您的 html 到:
<input type="text" name="user_name" ng-model="ctrl.user.userName">
"name" 属性仅在您将输入嵌入表单时使用。如果是这种情况,您可以使用
访问验证等
$scope.formName.user_name
我正在尝试获取 user.firstName 和 user.lastName,为这些模型添加一个手表集合,然后吐出一个用户名。
我似乎无法在两者之间进行交流,我认为我使用的是 scope 和 self 不正确。我很新,误解了这两个概念。
并且因为我遇到了错误,从 $user
对象中获取 lastName
和 firstName
并将某些内容返回到视图的正确方法是什么?
我正在使用 'controller as' 语法。请提供任何指导。
HTML
<input ng-model="ctrl.user.firstName" required>
<input ng-model="ctrl.user.lastName" required>
<input type="text" value="{{userName}}" name="user_name" ng-model="ctrl.user.userName">
JS
var self = this
$scope.$watchCollection('[user.firstName, user.lastName]', function () {
if (self.user.firstName != '' && self.user.lastName != '') {
$scope.userName = self.user.firstName + '_' + self.user.lastName + '_' + Math.floor((Math.random() * 100000) + 1);
$scope.user.userName.$setViewValue($scope.userName);
}
});
$watchCollection 是针对范围进行评估的,因此您需要:
var self = this
self.user = {};
$scope.$watchCollection('[ctrl.user.firstName, ctrl.user.lastName]', function () {
if (self.user.firstName != '' && self.user.lastName != '') {
$scope.userName = self.user.firstName + '_' + self.user.lastName + '_' + Math.floor((Math.random() * 100000) + 1);
self.user.userName.$setViewValue($scope.userName);
}
});
此外,我认为您不必担心使用 $setViewValue,只需更改为:
$scope.$watchCollection('[ctrl.user.firstName, ctrl.user.lastName]', function () {
if (self.user.firstName != '' && self.user.lastName != '') {
self.user.userName = self.user.firstName + '_' + self.user.lastName + '_' + Math.floor((Math.random() * 100000) + 1);
}
});
和您的 html 到:
<input type="text" name="user_name" ng-model="ctrl.user.userName">
"name" 属性仅在您将输入嵌入表单时使用。如果是这种情况,您可以使用
访问验证等$scope.formName.user_name