javascript - 使用 AngularJS/Ionic 框架的动态 CSS

Question

我需要设置动态div的自定义样式。Div 符合应答器:

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

每个字母的颜色必须根据级别函数和数组中声明的索引值来定义。我有三个级别(低、中、高)，所以低风格、中风格和高风格。例如，该数组可以是:['color': 'white', 'border-color': 'blue', ..., 'color': 'white', 'border-color': 'red']。每个字母都有一个数组元素。

您能为这种情况提出一个明智的解决方案吗？

谢谢

编辑: Controller 中使用的变量是:

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

Answer 1

你可以像这样传递你的 ng 风格的指令函数

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

该指令看起来像这样

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

                    }
        }
    }

})

如果你愿意，你可以从数组传递级别和样式信息并在指令中返回它