0

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

Ashwin
  • 12,081
  • 22
  • 83
  • 117

2 Answers2

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

Mathieu Bertin
  • 1,634
  • 11
  • 11
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.

Community
  • 1
  • 1
ababashka
  • 2,101
  • 1
  • 14
  • 15