Динамический CSS с AnguarJS / Ionic Framework

Question

Динамический CSS с AnguarJS / Ionic Framework

0

Мне нужно установить собственный стиль динамического 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']. Для каждой буквы есть элемент массива.

Не могли бы вы предложить разумное решение для этого случая?

благодаря

EDIT: переменные, используемые в контроллере:

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

user3410517 30 июнь 2015, в 12:57

Источник

Теги:

javascript

ionic-framework

angularjs

1 ответ

Ещё вопросы

stackg91 · Accepted Answer · 2015-06-30T09-54-00.000Z

Вы можете передать свой стиль 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;

                    }
        }
    }

})

Если u хочет, чтобы u мог передать уровень и информацию о стиле из массива и вернуть его в директиве

Не могли бы вы быть более конкретным? Спасибо
ну, функция changetheColor вызывается для каждого элемента, который имеет «colordirective», поэтому, когда вы, например, ng-repeat для некоторого массива, каждый элемент получает цвет в зависимости от «style-level» (средний - высокий ....)
Вы сказали, что каждая буква имеет элемент массива, поэтому в основном каждая буква будет иметь другой цвет в зависимости от уровня, в моем примере средний будет зеленым, а высокий будет красным
Мне нужно передать информацию об уровне и массив стилей. Оба параметра важны для меня
я просто изменил свой ответ, так что вам нужно передать уровень и colorinfo в директивную функцию, и там вы просто возвращаете colorinfo в зависимости от уровня стиля