How to pass value from controller to input HTML in angularjs?

Question

How do I pass a value from my controller to <input>tag in my view? I got the data successfully but calling it from the html, it's not working? I don't get any errors, my syntax is just wrong, I tried several syntax base from angularjs documentation, I also tried using ng-value={{data.email}} and even placing double quotes between the value. What is the proper way to do this?

this is my html:

<label class="item item-input">
    <input type="text" placeholder="Email" value={{data.email}} disabled>
</label>

this is my controller:

$http({
    method: 'POST',
    url: 'myservice',
    data: encodedString,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
    for (i = 0; i < data.length; i++) {
        if (data[i].QActivationCode === data[i].token) {
            $scope.userData = data[i];
            Acct.setAcctEmail(data[i].email);
        }

    }
});

Your HTML references data, but you actually assign the data to $scope.userData — Daniel
– Daniel, Commented May 23, 2016 at 4:34
damn, i didn't knew about that, because I tried doing this in my previous app, it's working but now it didn't work when I pass the value to the input.. many thanks Daniel — JC Borlagdan
– JC Borlagdan, Commented May 23, 2016 at 4:37

Shashank Agrawal · Accepted Answer · 2016-05-23 05:34:09Z

2

You can use either ng-model or ng-value. You are using the wrong key in the view i.e. you should use userData.email instead of data.email in the HTML view. (The statement $scope.userData = data[i]; states that you are adding the key userData in the scope not the data):

Using ng-model

<label class="item item-input">
    <input type="text" placeholder="Email" ng-model="userData.email" disabled>
</label>

Using value

 <label class="item item-input">
    <input type="text" placeholder="Email" value={{userData.email}} disabled>
</label>

Since the input field is disabled and we do not need to alter that input field so you should use the 2nd option.

answered May 23, 2016 at 5:34

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

Comments

Suneet Bansal · Accepted Answer · 2016-05-23 05:55:15Z

In angular, ng-model is used to bind the scope values with the html elements. Or we can use {{}} expression if we have to pass the value to the input tags.

Small description about ng-model:

The ngModel directive binds an input , select , textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive. ngModel is responsible for: Binding the view into the model, which other directives such as input , textarea or select require.

Corrected html code is attached below:

1. <label class="item item-input">
    <input type="text" placeholder="Email" ng-model="userData.email" disabled>
</label>

2. <label class="item item-input">
    <input type="text" placeholder="Email" value={{userData.email}} disabled>
</label>

mtamma · Accepted Answer · 2016-05-23 04:34:00Z

0

use ng-model

<label class="item item-input">
  <input type="text" placeholder="Email" ng-value="data.email" disabled>
</label>

make sure that object data exist on the scope.

answered May 23, 2016 at 4:34

mtamma

5334 silver badges6 bronze badges

1 Comment

JC Borlagdan Over a year ago

i already did this, for some reason this didn't work, i don't know why.. but the comment on the answer already gave me the correct output.. but thanks for the reply sir @mtamma

Collectives™ on Stack Overflow

How to pass value from controller to input HTML in angularjs?

3 Answers 3

Using ng-model

Using value

Comments

Small description about ng-model:

Corrected html code is attached below:

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Using ng-model

Using value

Comments

Small description about ng-model:

Corrected html code is attached below:

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related