ng-change not working on a text input

angularjs colors angularjs-directive angularjs-ng-change
Ashwin picture Ashwin · Sep 30, 2014 · Viewed 124.3k times · Source

I am new to angular js. In my code there is color picker initialized from a text field. User changes the value of color and I want that color to be reflected as a background of a text in a span. It is not working. What is missing?

HTML:

<body ng-app="">
   <input type="button" value="set color" ng-click="myStyle={color:'red'}">
   <input type="button" value="clear" ng-click="myStyle={}">
   <input type="text" name="abc" class="color" ng-change="myStyle={color:'green'}">
   <br/>
   <span ng-style="myStyle">Sample Text</span>
   <pre>myStyle={{myStyle}}</pre>
</body>

Plunker - http://plnkr.co/edit/APrl9Y98Em0d6rxuzRDE?p=preview

However when I change it to ng-click it works.

Answer

Petr Averyanov picture Petr Averyanov · Sep 30, 2014

ng-change requires ng-model, 

<input type="text" name="abc" class="color" ng-model="someName" ng-change="myStyle={color:'green'}">

Related questions

if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More
AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More