Angular js apply color picker value

Question

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

Mathieu Bertin · Accepted Answer · 2014-09-30 08:17:54Z

1

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

answered Sep 30, 2014 at 8:17

Mathieu Bertin

1,62411 silver badges11 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 30, 2014 at 8:18

ababashka

2,1011 gold badge15 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular js apply color picker value

2 Answers 2

Comments

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

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

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

Comments

Your Answer

Sign up or log in

Post as a guest

Related