Angular js applying Gradients with ng style

Question!

Unable to set gradients using angular js ng-style directive.. able to set normal color by using below

<span ng-style="{'background-color': slidercolor}">works</span>

But for gradient it doesnt work

Below is the jsfiddle for the same.

<span ng-style="{'background-color':'-webkit-gradient(linear, left top, right top, color-    stop(0%,'slidercolor'), color-stop(100%,rgba(125,185,232,0)))'}">didnt work</span>

http://jsfiddle.net/sT8ar/1/

Also please let me know which should be enclosed in quotes and which should not..



Answers
You got two problems here:

  1. -webkit-gradient() produces <image>, not <color>, it shoud be used as background-image.
  2. In Angular expression concatenation is done with a + (plus sign).

So the correct syntax is (demo):

<span ng-style="{'background-image':'-webkit-gradient(linear, left top, right top, color-stop(0%,'+ slidercolor+'), color-stop(100%,rgba(125,185,232,0)))'}">Works now too.</span>
By : Pavlo


This video can help you solving your question :)
By: admin