带有AnguarJS / Ionic框架的动态CSS

用户名

我需要设置动态div的自定义样式。Div是符合balise的：

<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']。每个字母都有一个数组元素。

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

谢谢

编辑：在控制器中使用的变量是：

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

stackg91

您可以通过ng-style这样的指令函数

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

                    }
        }
    }

})

如果您愿意，可以从数组中传递Level和样式信息，并在指令中将其返回

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。