使用'controller as'$ scope angularJS从对象模型访问值

时间:2015-02-20 01:26:45

标签: javascript angularjs angularjs-scope angularjs-model

我正在尝试获取user.firstName和user.lastName,向这些模型添加监视集合,并吐出userName。

我似乎无法在两者之间进行沟通,我认为我使用范围和自我不正确。我很新,误解了这两个概念。

因为我收到错误,从lastName对象中抓取firstName$user的正确方法是什么,并向视图吐出一些东西?

我正在使用'controller as'语法。 Ty可以提供任何指导。

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);
    }
});

1 个答案:

答案 0 :(得分:0)

$ 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