CODEWITHSUNDEEP
javascriptcssangularjsgradient
MostlyRquestions
MostlyRquestions

Reputation: 566

How to style an element with a gradient from 0-100 using angular

I'm creating a list with a ng-repeat using angular. I want to style the background of each list item with a gradient. I have a value in my object that is a number from 0-100 and I would like to style the background gradient based on that number. Look at this fiddle for a basic example of my issue.

UPDATE:

I just realized the first fiddle was using angular 1.0, which is useless to me. I remade the fiddle using angular 1.3 which is more relevant. However the acceptable answer no longer works with this version of angular. any suggestions? here's the new fiddle

heres a simple object 

$scope.list = [
    {x:1,y:70},
    {x:2,y:80},
    {x:3,y:90},
    {x:4,y:100}
]

I want the background of my list-items to be a gradient of the $scope.y value. I'm sure this is possible using ng-style but I cannot seem to figure it out, so any help is greatly appreciated.

Upvotes: 2

Views: 356

Answers (2)

christian Nguyen
christian Nguyen

Reputation: 1600

Just for simplify

<li class="list-group-item" style="background-image: linear-gradient(to bottom, red {{x.x}}%, blue {{x.y}}%)" ng-repeat="x in list">{{ x.x }} 
  <span class="pull-right">{{ x.y }}</span>     
</li>

Upvotes: 1

Yaser
Yaser

Reputation: 5719

Try this, I've tried it in your code and it's working:

<span style="{{ 'background-image: linear-gradient(to bottom, rgba(255,255,255,0)' + x.x +'%, rgba(41,137,216,1)' + x.y + '%)' }}">Works now too.</span>

Upvotes: 1

Related Questions