Как использовать NG-класс в соответствии с содержанием HTML - AngularJS

Question

Как использовать NG-класс в соответствии с содержанием HTML - AngularJS

0

Я печатаю каждый элемент в моем массиве как абзац HTML, используя ng-repeat.

<p ng-repeat="item in queries track by $index">{{ item }}</p>

Результат:

------------ title 1 --------------
content 1
------------ title 2 --------------
content 2
------------ title 3 --------------
content 3
------------ title 4 --------------
content 4

Проблема в том, что я не могу понять, как настраиваемые абзацы стиля (например, color:red;).

James 15 май 2016, в 16:42

Источник

0

вы можете установить свойство color для каждого запроса в вашем контроллере или директиве, а затем просто вызвать item.color
user2954587 15 май 2016, в 14:42
0

Я только что понял, что редактирование Александра Азизи удалило важную часть исходного вопроса - применение класса / стиля только тогда, когда элемент содержит слово «заголовок». Это значительно меняет ответ.
WonderGrub 15 май 2016, в 15:01

Теги:

javascript

angularjs

3 ответа

2

Если вы хотите использовать ng-class, вы можете использовать этот синтаксис:

ng-class="{'class-name': item.indexOf('title') >= 0}"

Или вы можете использовать ng-стиль следующим образом:

ng-style="setColor(item)"

С функцией:

$scope.setColor = function (item) {
    if (item.indexOf("title") >= 0) {
        return { color: red };
    }
}

WonderGrub 15 май 2016, в 13:07

1

спасибо @WonderGrub, ваше решение хорошо работает для меня.
James 15 май 2016, в 15:00

1

Что-то вроде этого будет делать:

<p  ng-repeat="item in queries track by $index" 
    ng-attr-style="{{ item.indexOf('title') != -1 ? 'color: red' : '' }}">{{ item }}</p>

gevorg 15 май 2016, в 13:39

0

большое спасибо @Gevorg Harutyunyan ваше решение отлично работает, (у)
James 15 май 2016, в 14:52
0

Добро пожаловать!
gevorg 15 май 2016, в 14:53

Ещё вопросы

вы можете установить свойство color для каждого запроса в вашем контроллере или директиве, а затем просто вызвать item.color
Я только что понял, что редактирование Александра Азизи удалило важную часть исходного вопроса - применение класса / стиля только тогда, когда элемент содержит слово «заголовок». Это значительно меняет ответ.
спасибо @WonderGrub, ваше решение хорошо работает для меня.
большое спасибо @Gevorg Harutyunyan ваше решение отлично работает, (у)

Neta Meta · Accepted Answer · 2016-05-15T13-39-00.000Z

вы добавляете атрибут ng-class

<p  ng-repeat="item in queries track by $index" 
              ng-class={someCustomClass: item.title} >{{ item }}</p>

если выше не работает, то это должно

<p  ng-repeat="item in queries track by $index" 
            ng-class={someCustomClass: Boolean(item.title) } >{{ item }}</p>

Если я ошибаюсь, идея состоит в том, чтобы предоставить объектный литерал для ng-класса, где ключ - это имя класса, а значение - это условие для применения класса

поэтому ng-class={ theClassNameToUse: TheCondition }