Angular - adding styles based on JSON data

Question

I'm writing my first Angular app - wasn't sure how best to describe this so excuse me if its already been answered.

I'm using ng-repeat to display some JSON data:

<ul class="no-bullet" ng-repeat="person in persons">
   <li>{{person.name}}
     <div class="graphBar"></div>
   </li>
</ul>

That div I have with class graphBar contains some CSS in which I'm setting

.graphBar {
background: linear-gradient(to right,
          $Colour1 0%, $Colour1 33%,
          $Colour2 33%, $Colour2 55%,
          $Colour3 55%, $Colour3 80%,
          $Colour4 80%, $Colour4 100%);
}

What i need advice on is how do I send data from {{person.options}} to some function so that I can process it in order to the percentages for the CSS and then to that div?

Any help would be appreciated.

Thanks

Checkout this, if it looks like that what you want (at least visually): plnkr.co/edit/B0OGpNhpsKTmG3x9vLvy?p=preview — oKonyk
– oKonyk, Commented Feb 23, 2016 at 19:06
What do you want to change dynamically? Percentage, colors or both? — oKonyk
– oKonyk, Commented Feb 23, 2016 at 19:19
Both - I think what I'm going to have to do is get this processed server side, so when the data comes in i just place it in. Can't think of any other way — userMod2
– userMod2, Commented Feb 23, 2016 at 19:22
Infact - could i create a directive - say called graphBar then pass into that to do the smart processing? — userMod2
– userMod2, Commented Feb 23, 2016 at 19:41

oKonyk · Accepted Answer · 2016-02-23 20:44:29Z

1

Here (Plunker) is my solution.

Posible data format:

`{ name:'John', colors: {red:33, yellow: 15, green: 10, blue: 20}}`

Angular app:

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyAppCtrl', function($scope){
    $scope.styleBuilder = function (colors){
        var raw = ['linear-gradient(to right, ']
        var pointer = 0
        for (var key in colors){
            raw.push(key+ ' ' + pointer + '%,  ' + key + ' ' + (colors[key]+pointer) + '%, ')
            pointer += colors[key];
        }
        if(pointer<100){ //here we are checking if percentages add up to 100%
            raw.push('#D8E0E3' + ' ' + pointer + '%,  ' + '#D8E0E3' + ' ' + 100 + '%')
        }
        raw.push(')')
        return raw.join('')
    }

    //example data (use $http to get data from backend)
    $scope.persons = [
        { name:'John',
            colors: {red:33, yellow: 15, green: 10, blue: 20}
        }, 
        {name:'Mary',
            colors: {red:10, yellow: 25}
        }, 
        {name: 'Piter',
            colors: {green: 70, blue: 20}
        }
    ]

})

HTML:

<ul class="no-bullet" ng-repeat="person in persons">
   <li>{{person.name}}
       <div class="graphBar" ng-style="{'background': styleBuilder(person.colors)}"></div>
   </li>
</ul>

See Plunker for more details.

End result:

answered Feb 23, 2016 at 20:44

oKonyk

1,47611 silver badges16 bronze badges

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

2 Comments

userMod2 Over a year ago

Mate you're a legend! Thats exactly what I needed to understand - that section styleBuilder and using it within the $scope perfect. Very much appreciated.

oKonyk Over a year ago

Sure! Happy to help!

Martin · Accepted Answer · 2016-02-23 17:54:45Z

0

You want to use something like ng-style.

Something like:

 <div ng-style="{background: 'linear-gradient(to right, person.options.to, person.options.right)'}"></div>

answered Feb 23, 2016 at 17:54

Martin

16.4k4 gold badges51 silver badges58 bronze badges

2 Comments

userMod2 Over a year ago

Ok - but how would I pass it to a function first as the data I get from person.options will be in an array like ["classa : 5","classb : 3","classc : 5"] so i need to 'recreate' that into an appropiate string?

userMod2 Over a year ago

Also - I need to get the variables $Colour1 etc whcih are SASS varibales. Can i update the css from code?

Collectives™ on Stack Overflow

Angular - adding styles based on JSON data

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related