0

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?

Amirreza
  • 575
  • 9
  • 25

2 Answers2

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.

Evan Kaiser
  • 181
  • 8
  • 1
    question is :why textarea is working correctly but input not? – Amirreza Jul 27 '16 at 12:16
  • 2
    Because ng-bind binds the "inner HTML" of the tag. Inner HTML refers to what is between the begin and end tags, i.e. this is inner HTML. Input and textarea work differently, in terms of where the dynamic content is stored. The input tag is 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 so it has inner HTML that can be bound using ng-bind. – Evan Kaiser Jul 28 '16 at 13:05
  • Plus one to both the question and answer in the above comments. – Mr. Noddy Jul 20 '18 at 09:29
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.

michelem
  • 14,430
  • 5
  • 50
  • 66
  • 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` – skubski Aug 31 '15 at 10:54
  • 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 Aug 31 '15 at 11:13
  • textarea is working correctly, input has a problem (it's probably a bug) – Amirreza Aug 31 '15 at 11:15
  • 1
    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. – skubski Aug 31 '15 at 11:54
  • 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 – Amirreza Nov 21 '15 at 06:36