AngularJS Dynamically changing field value

Question

For purposes of an example here is a very basic piece of code. CodePen example http://codepen.io/anon/pen/yOYgEa

{{name}}

is linked to

<input ng-model="name" type="text" placeholder="" id="name" />

So when some text is typed in the input field, it is reflected on the page. However if the value of #name is set dynamically, in this case by pressing the button, then {{name}} does not update.

I know there is an 'angular' way of doing this, however this is just an example because in reality the dynamic change will be from a jQuery callback.

I've tried to add a $scope.watch but that doesn't seem to work either.

<input type="button" id="mybutton" value="Demo" ng-click="name='Demo'"> — Rhumborl
– Rhumborl, Commented Mar 4, 2016 at 13:34
This works as expected, but the dynamic change (in this instance represented by a button click), will be from a jQuery callback. — Rob
– Rob, Commented Mar 4, 2016 at 13:37
@Rob do you have a case where you wanted to manipulated DOM, from outer context of angular...? — Pankaj Parkar
– Pankaj Parkar, Commented Mar 4, 2016 at 13:55
@Pankaj I have a DOM element which will be changed dynamically, and depending on the value of that element will in turn alter the angular $scope — Rob
– Rob, Commented Mar 4, 2016 at 14:00
@Rob would you mind to explain it further.. I don't really understand it.. Thanks :) — Pankaj Parkar
– Pankaj Parkar, Commented Mar 4, 2016 at 14:02

Pawan B · Accepted Answer · 2016-03-04 14:13:39Z

1

Try this :

var app = angular.module('demo',[]);

app.controller('MyController', function MyController($scope) {

  $("#mybutton").on("click", function(){
    //$("#name").val("Demo");
    $scope.name = "Demo"
    $scope.$apply() // we use $scope.$apply() which will call $scope.$digest()
  });

 $scope.name = "Enter a value";

 $scope.$watch('name',function(newValue, oldValue){
        $scope.name(newValue);
    }); 

});

$(document).ready(function(){



});

removing code from $(document).ready bcoz $scope is not accessible there .

EDIT : you can also use ng-click

In HTML

<input type="button" id="mybutton" value="Demo" ng-click="someFunction()">

In controller :

    $scope.someFunction = function(){
          $scope.name = "Demo" 
   }

edited Mar 4, 2016 at 14:13

answered Mar 4, 2016 at 13:41

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

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

3 Comments

Pankaj Parkar Over a year ago

there is no need to use "click" handle of jQuery here with angular.. I'd say use ng-click instead

Pankaj Parkar Over a year ago

@p2 I understand man.. I think OP has code which wanted to manipulate scope from outer context of angular,,

Abhishek Shukla Over a year ago

you don't need $scope.apply() for simple task. when you are in angular scope binding event using jquery is not the right approach.

Dark Falcon · Accepted Answer · 2016-03-04 13:49:39Z

If you wish to decouple the jQuery callback from Angular, you could simply trigger the change event, which will cause Angular to process the new value as if the user had typed it in the box:

var app = angular.module('demo',[]);

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";
});

$(document).ready(function() {
  $("#mybutton").on("click", function() {
    $("#name").val("Demo").trigger('change');
  });
});

http://codepen.io/anon/pen/yOYMBb

camden_kid · Accepted Answer · 2016-03-04 13:49:41Z

1

Use trigger - CodePen

JS

$(document).ready(function(){

  $("#mybutton").on("click", function(){
    $("#name").val("Demo");
    $("#name").trigger('input');
  });

});

answered Mar 4, 2016 at 13:49

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Comments

Vertexwahn · Accepted Answer · 2016-03-04 14:48:25Z

You don't need jQuery event binding when working inside the Angular scope.

When you update model values in angularjs, it kicks digest cycle to update $scope variables.

So, when you are working outside angular scope and try to invoke any event, digest cylce does not kicks and the result is model values are not udpated.

Below is udpated angular code: Added update method in scope and removed $scope.watch.

app.controller('MyController', function MyController($scope) {
 $scope.name = "Enter a value";

  $scope.update  = function(value){
    $scope.name  = value;
  }

});

Updated HTML: Added ng-click event.

 <input type="button" id="mybutton" ng-click="update('Demo');"  value="Demo">

Here is the nice article, if you want to dig more in deep.

http://www.sitepoint.com/understanding-angulars-apply-digest/

Collectives™ on Stack Overflow

AngularJS Dynamically changing field value

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related