AngularJS one-way binding not working properly

Question

I'm trying to bind an input (one-way), whoever if I change its value its no longer binding properly

    //controller => on row click => change input
    $scope.getNote = function (note)
    {
        $scope.currentNote = note;
    };

   //view
   <input type="text"  value="{{currentNote.Title}}" >

This is the scenario, getNote is being called and the input is being filled properly. However, when I change the value of the input and call getNote again the input doesn't show the new value even tho its value attribute contains the correct value. So somehow its not showing the correct value to the end user.

eg:
1- First Value from GetNote = "Hello World"
2- I change the value of the input to "Foo" as a normal user
3- Call GetNote again and the I get value="Hello World" but on the screen it displays "Foo"

Hack Solution:

//controller object value copy using jquery
$scope.currentNote = jQuery.extend({}, note);

//view
<input type="text"  ng-model="currentNote.Title" >

Am hoping for an Elegant solution

You need to use <input type="text" ng-model="currentNote.Title" > — PSL
– PSL, Commented Sep 1, 2014 at 17:49

DanielM · Accepted Answer · 2014-09-01 17:52:05Z

1

I think you should try with ngValue directive, as sbaaaang said. But without curly braces (documentation here: https://docs.angularjs.org/api/ng/directive/ngValue).

Edit:

And maybe if you just want to use one-way data binding a div will be enough for your purposes, and not an input. Then you can style it as you want.

answered Sep 1, 2014 at 17:52

DanielM

1,2243 gold badges20 silver badges31 bronze badges

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

Comments

Filippo oretti · Accepted Answer · 2014-09-01 19:52:35Z

0

use ng-value="" instead of value="" should fix

i would do:

$scope.getNote = function (note)
    {
        $scope.currentNote = note;
    };

   //view
   <input type="text" ng-model="currentNote.Title" ng-value="currentNote.Title" />

If you still getting problems try also:

$scope.getNote = function (note)
        {
            $scope.$on(function () {
             $scope.currentNote = note;
            });
        };

edited Sep 1, 2014 at 19:52

answered Sep 1, 2014 at 17:45

Filippo oretti

50k96 gold badges230 silver badges351 bronze badges

7 Comments

rtp Over a year ago

just tried that but now nothing is showing for the end user, even tho i can see the value change inside firebug

Filippo oretti Over a year ago

so try using ng-model="" usually forms need it ;) @rtp i updated the answer

rtp Over a year ago

ng-model is working properly but i want a one-way binding not two way :(

Filippo oretti Over a year ago

@rtp yeah remove {{ }} from the ng-value="" expression and it will work, updated answer

rtp Over a year ago

same problem, after i change the value its not rebinding properly

|

Collectives™ on Stack Overflow

AngularJS one-way binding not working properly

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related