Dynamic CSS with AnguarJS / Ionic Framework

Question

I need set a custom style of dynamics div. Div are conforms to the balise :

<div class="row">
    <div id={{'letter'+$index}} ng-style="{{theStyle}}" class="col" 
         ng-repeat="letter in letters track by $index">{{letter}}
    </div>
</div>

The color of each letter must be defined in function of a level and by the value of the index that are declared in an array. I have three levels (low, medium, high), so the low-style, the medium-style and the high-style. The array can be for example: ['color': 'white', 'border-color': 'blue', ..., 'color': 'white', 'border-color': 'red']. For each letter there are an element of the array.

Could you suggest a smart solution for this case ?

Thanks

EDIT: The variables used in the controller are:

var word = getWord(objectWord, getLanguage());
$scope.letters = word.split('');
$scope.level = getLevelCSS(getLevel());
var arrStyles = getStyles(letters.length);

Can you add arrays/object you are working with? What you posted is not valid. Post letters array. — dfsq
– dfsq, Commented Jun 30, 2015 at 10:32

stackg91 · Accepted Answer · 2015-06-30 12:11:23Z

1

You could pass your ng-style a directive function like this

<div ng-style="changetheColor(style-level, colorinfo)" colordirective></div>

And the directive would look smth like this

.directive('colordirective', function (Ls) {
         return function (scope, element, attr) {

             scope.changetheColor = function (level, color) {
                   if(level == 'medium'){

                    return color;

                    }else if(level == 'high'){

                        return color;

                    }
        }
    }

})

If u want u can pass the Level and the style info from the array and return it in the directive

edited Jun 30, 2015 at 12:11

answered Jun 30, 2015 at 11:10

stackg91

5948 silver badges25 bronze badges

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

5 Comments

user3410517 Over a year ago

Could you be more specific about ? Thanks

stackg91 Over a year ago

well the changetheColor function is called for every element which has "colordirective" so when u for example ng-repeat over some array every element gets the color depending on the "style-level" (medium - high....)

stackg91 Over a year ago

you said every letter has an array element so basicly every letter would get a different color depending on the level in my example medium would be green and high would be red

user3410517 Over a year ago

I need pass the level info and the array of styles. Both parameters are important for me

stackg91 Over a year ago

i just changed my answer so u need to pass the level and the colorinfo to the directive function and there u just return the colorinfo depending on the style-level

Collectives™ on Stack Overflow

Dynamic CSS with AnguarJS / Ionic Framework

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related