CODEWITHSUNDEEP
javascriptangularjsionic-framework
user3410517
user3410517

Reputation: 295

Dynamic CSS with AnguarJS / Ionic Framework

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);

Upvotes: 0

Views: 629

Answers (1)

stackg91
stackg91

Reputation: 594

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

Upvotes: 1

Related Questions