Когда я рисую div и устанавливаю фоновый цвет, он отлично работает.
<div style="border:1px solid #f00; background-color:#00f;width:{{...
Когда я пытаюсь сделать цвет динамическим встроенным значением JS (я использую фиксированное значение inline для простоты здесь), тогда весь div сворачивается в 2 пиксела high & wide.
<div style="border:1px solid #f00; background-color:#{{ "00f"}};width:{{...
test:#{{ "00f" }}
test:#00f
отображается правильно после этого. Почему мой коллапс? Я использую динамические значения для ширины, и мне это нравится
Ответ был довольно простым, двойная кавычка "в тегах {{...}} должна быть одиночной цитатой" по-видимому ", по крайней мере, она работает, если строка окружена одинарными кавычками. Она полностью разбивает элемент стиля, который почему div сжимался до нулевого размера.
<div style="border:1px solid #f00; background-color:#{{ '00f'}};width:{{...
работает правильно. ценят предложения об использовании модели правильно - но это несколько философски для этого вопроса, который был именно тем, почему Div ломался с использованием inline.
Директива ngClass позволяет динамически устанавливать классы CSS в HTML-элемент путем привязки выражения, которое представляет все классы, которые необходимо добавить.
<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">
<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!</div>
Лучший способ получить динамические стили с angularJS будет с ng-классом, как упоминал Амит в первом ответе. Однако всегда лучше обращаться с ng-классом на основе значений угловой переменной, как показано ниже:
<div ng-class="{ '00f-background': awesome, 'normal-background': simple }
В этом случае класс 00f-background устанавливается, если awesome является true, а normal-background устанавливается, если simple is true.