Beginners AngularJS code not working as expected [duplicate]

Question

I'm new to AngularJS and was just playing around with the stuff. Here is my HTML:

<div ng-app ng-controller="nameController">
    <input type="text"  value="Jack" ng-model="fname" />
    <input type="text" value="Sparrow" ng-model="lname" />
    {{getFullName()}}
</div>

<input type="text" value="Hello" />

And here is the controller code:

function nameController($scope) {
    $scope.getFullName = function () {
        return $scope.fname + " " + $scope.lname;
    };
}

I have set the value of the input text fields using the value attribute. So I expected the controller function getFullName to read those values and return the full name on page load. But what I get is:

undefined undefined

And the input text boxes empty. Why is it so?

James Allardice · Accepted Answer · 2013-06-26 08:40:29Z

1

If you want default values for those inputs, use the model and set them as properties on $scope in the controller:

function nameController($scope) {
    $scope.fname = "Jack";
    $scope.lname = "Sparrow";
    $scope.getFullName = function () {
        return $scope.fname + " " + $scope.lname;
    };
}

You can then remove the value attribute from the markup. This keeps the data nicely separated from the view. Here's a working example.

Alternatively, you could use the ngInit directive:

<div ng-app ng-controller="nameController" ng-init="fname = 'Jack'; lname = 'Sparrow'">
    <input type="text" ng-model="fname" />
    <input type="text" ng-model="lname" />
    {{getFullName()}}
</div>

answered Jun 26, 2013 at 8:40

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iJade Over a year ago

ok dat works....but just to know why it doesn't pick up data from value attr of input element on page load

James Allardice Over a year ago

@iBlue - Just because that's the way it works. The data belongs in the model, not in the view.

Collectives™ on Stack Overflow

Beginners AngularJS code not working as expected [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related