current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm attempting to grab the user.firstName and user.lastName, add a watch collection to those models, and spit back out a userName.

I can't seem to communicate between the two, I think I'm using scope and self incorrect. I'm pretty new and misunderstanding the two concepts.

And because I'm getting an error, what is the proper way to grab lastName and firstName from the $user object, and spit back out something to the view?

I'm using the 'controller as' syntax. Ty for any guidance.

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);
    }
});
share|improve this question

1 Answer 1

up vote 0 down vote accepted

$watchCollection is evaluated against scope, so you need:

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

Also, I don't think you need to worry about using $setViewValue, just change to:

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

and your html to:

<input type="text" name="user_name" ng-model="ctrl.user.userName">

the "name" attribute is only used if you are embedding the input in a form. If that is the case, you can access for validation, etc, with

$scope.formName.user_name
share|improve this answer
    
self.user.firstName is producing an error, is it because it's not instantiated before the watch happens?? –  Tuesdave Feb 20 at 1:49
1  
Yes, you need to initialized the user object before referencing a property of it. See update –  Joe Enzminger Feb 20 at 1:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.