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>

每个字母的颜色必须根据级别和数组中声明的索引值来定义。我有三个级别（低，中，高），所以低风格，中等风格和高风格。该阵列可以是例如：[＆＃39;颜色＆＃39;：＆＃39;白色＆＃39;，＆＃39; border-color＆＃39;：＆＃39; blue＆＃39;，...，＆＃39; color＆＃39;：＆＃39; white＆＃39;，＆＃39; border-color＆＃39;：＆＃39; red＆＃39;]。对于每个字母，都有一个数组元素。

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

由于

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

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

Answer 1

您可以像这样传递你的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和样式信息并将其返回到指令

使用AnguarJS / Ionic Framework的动态CSS

1 个答案: