CODEWITHSUNDEEP
angularjscolorsangularjs-ng-change
Ashwin
Ashwin

Reputation: 12411

Angular js apply color picker value

I want to apply the color picker runtime value as a background color of span text. How can I use model as a color value?

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-model="abc" 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

Upvotes: 0

Views: 4411

Answers (2)

ababashka
ababashka

Reputation: 2101

I not really good understood what you want to do, but i think something like this: when you choose some value in the color picker - your span backround color is set to that value. You can see this plunk:

Demo: http://plnkr.co/edit/2QWZy5zwdmpND7vyEF03?p=preview

I added module and controller.

Upvotes: 1

Mathieu Bertin
Mathieu Bertin

Reputation: 1624

You just have to use the ng-model of your input.

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

your plunker with the code

Upvotes: 1

Related Questions