angular input ng-bind not working

Question

this is the code:

        <span>{{ vm.GetSalaryItemValue(salaryItem,detail) }}</span>
        <input type="number" class="form-control" data-ng-bind="vm.GetSalaryItemValue(salaryItem,detail)" />
        <textarea  class="form-control" data-ng-bind="vm.GetSalaryItemValue(salaryItem,detail)" rows="1"
                    ng-blur="vm.SalaryItemValueChanged($event,salaryItem,detail)"></textarea>

span and textarea are working correctly and shows value, but input tag not working and display nothing. (span and textarea are for testing only) (salaryItem,detail are passing correctly), if I change ng-bind to ng-model, value will be displayed but an error will be throw.

any idea?

What error do you get in ng-model?

Hardik Gondalia
– Hardik Gondalia

2015-08-31 10:34:02 +00:00
Commented Aug 31, 2015 at 10:34 — Hardik Gondalia
– Hardik Gondalia, Commented Aug 31, 2015 at 10:34
ng-bind is not the same as ng-model.

skubski
– skubski

2015-08-31 10:48:19 +00:00
Commented Aug 31, 2015 at 10:48 — skubski
– skubski, Commented Aug 31, 2015 at 10:48

Evan Kaiser · Accepted Answer · 2016-07-22 19:37:01Z

4

If you want one way binding to a textbox's value, i.e. from a calculated function, use ng-value. Just be warned that any input placed in there will not be able to be read. This is only really useful for a readonly or disabled textbox where you don't need 2-way binding.

answered Jul 22, 2016 at 19:37

Evan Kaiser

1819 bronze badges

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

3 Comments

Amirreza Over a year ago

question is :why textarea is working correctly but input not?

Evan Kaiser Over a year ago

Because ng-bind binds the "inner HTML" of the tag. Inner HTML refers to what is between the begin and end tags, i.e. <tag>this is inner HTML</tag>. Input and textarea work differently, in terms of where the dynamic content is stored. The input tag is <input value="stuff" /> so it has no inner HTML and you must use ng-value or ng-model to interact with the value attribute. The textarea tag is <textarea>stuff</textarea> so it has inner HTML that can be bound using ng-bind.

Mr. Noddy Over a year ago

Plus one to both the question and answer in the above comments.

michelem · Accepted Answer · 2015-08-31 11:00:07Z

3

Change the input code to use ng-model instead ng-bind and assign the output of vm.GetSalaryItemValue(salaryItem,detail) to a scope variable:

<div ng-init="inputNumber = vm.GetSalaryItemValue(salaryItem,detail)"></div>
<input type="number" class="form-control" data-ng-model="inputNumber" />

You need to assign the scope variable because ng-model cannot execute the function.

edited Aug 31, 2015 at 11:00

answered Aug 31, 2015 at 10:48

michelem

14.6k5 gold badges55 silver badges67 bronze badges

5 Comments

skubski Over a year ago

This is the error you're producing with your code:

"Error: [ngModel:nonassign] http://errors.angularjs.org/1.4.5/ngModel/nonassign?p0=getName()&p1=%3Cinput"lass%3D%22ng-pristine%20ng-untouched%20ng-valid%22%20ng-model%3D%22getName()%22%20type%3D%22text%22%3E

Amirreza Over a year ago

I need to calculate value on the fly based on the parameters, and inputs are generated, so there is no variable to bind to (I mean I cant generate variable for every input)

Amirreza Over a year ago

textarea is working correctly, input has a problem (it's probably a bug)

skubski Over a year ago

No there isn't a bug. You are mixing the usage of ng-bind and ng-model. Ng-bind evaluates an expression to set the text value of an element whilst ng-model binds to a property in the corresponding controller. You're using an expression to bind to ng-model and desperately wishing it would work.

Amirreza Over a year ago

it's working with "Textarea" as i mentioned, problem is "Input", if i change TextArea to input, it stop working. and where i used ng-model exactly? if you look at example i'm using ng-blur (focus-out), so read more carefully

Collectives™ on Stack Overflow

angular input ng-bind not working

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related