Angular data binding issues ng-value does'nt seems to work

Question

 <label class="item item-input">
    <span class="input-label"> Gender : </span>
   <input type="text" value="{{results.address}}" ng-model="formData.address">
 </label>

I want to place data coming from my API in the text field so that it can be changed later and I am using ng-model to bind the input data to the form so that it can be sent to API for making a change.

But I am getting an empty text field in a text box. value doesn't seem to be working and I have checked changing value to ng-value

When i used this code below everything is working pretty fine ! this means i have no problem in my controller ! i am getting a correct address from my API.

 <label class="item item-input">
    <span class="input-label"> Gender : </span>
   <input type="text"  ng-model="formData.address">"{{results.address}}"
 </label>

While using ng-value i am getting error !

 <label class="item item-input">
                    <span class="input-label"> Gender : </span>
                    <input type="text" ng-value="{{results.address}}" ng-model="formData.address">
                </label>

Hi, how many results do you have. Is it an array? or object? — , Aug 20 '16 at 07:20
you don't need to use `ng-value` when you have `ng-model` with input type `text`.. 2nd way is correct only\ — Pankaj Parkar, Aug 20 '16 at 07:33
I made example for you https://plnkr.co/edit/ojjTmFiSZL6gW6NkaEqD?p=preview — Abdelrahman M. Allam, Aug 20 '16 at 07:36

score 0 · Answer 1 · answered Aug 20 '16 at 07:34

0

No need of value attribute when assigning value dynamically. If i understood your question correctly

<input type="text" ng-model="apiValue">

http://plnkr.co/edit/sC0BmKQE1i08bTZlwCVQ?p=preview

answered Aug 20 '16 at 07:34

lch

4,569
13
42
75

then how would i use my form there if i place api value in ng-model ! what about this field ng-model = "form.fullname" – Kartik Khandelwal Aug 20 '16 at 07:36
seriously, you are not clear about what you are trying to achieve. i couldn't find this "form.fullname" anywhere in your question – lch Aug 20 '16 at 07:39
Actually i want to take data from the api and make it place in input field and then if i want to edit data it can be successfully edit and there is a button of save changes which take all the data from the form (which i am using ng-model to bind all my data to form) to API – Kartik Khandelwal Aug 20 '16 at 07:45
That's what i wrote in the plnkr. Write an ajax call, inside the success function of that ajax call. get the result and assign to ng-model of input. By the way input field doesn't have ng-change property. so you have write custom watcher for that. When the value is updated, make an ajax call to post the updated value – lch Aug 20 '16 at 07:51
as you said you have a button to submit, you dont need a watcher, make an ajax call when the button is clicked to post the updated value – lch Aug 20 '16 at 07:57
how do i take the value to post request ? how do i bind them ? – Kartik Khandelwal Aug 20 '16 at 08:15
The value is automatically gets bound to a variable through ng-model. Add ng-click to button and invoke a functiion. pass the variable to that function. make ajax call inside that function – lch Aug 20 '16 at 09:08

score 0 · Answer 2 · answered Aug 20 '16 at 07:56

0

Please check angular doc ng-value used to achieve one-way binding of a given expression to an input element such as an input[text] or a textarea, when that element does not use ngModel. you can see plnkr

answered Aug 20 '16 at 07:56

Abdelrahman M. Allam

892
10
16

then how are you using ng-model with ng-value – Kartik Khandelwal Aug 20 '16 at 08:09
why need to use both? as long as `ng-model` override `ng-value` If you want 2-way data binding use `ng-model` – Abdelrahman M. Allam Aug 20 '16 at 08:24

Angular data binding issues ng-value does'nt seems to work

2 Answers2