Как динамически создавать класс CSS с помощью AngularJS

Question

У меня есть веб-сайт Angular JS, где я использую данные из API, которые я хочу использовать для динамического создания класса CSS. Этот класс CSS затем отформатирует другие данные из API, отображаемого на странице Angular JS.

Например, существует ли способ для создания данных углового значения JS $ в контроллере при обработке данных API, а затем в соответствующем представлении .html, использовать данные $ scope для динамического создания класса CSS. Кстати, данные $ scope не могут использоваться внутри тега HTML STYLE, потому что символы скобок ('{' и '}') рассматриваются как символы STYLE, поэтому он не позволяет '{{' и '}}', чтобы расширить значение переменной $ scope.

EDIT: Вышеупомянутые комментарии были основаны на использовании IDE Visual Studio 2013, где синтаксис Angular показан как ошибка в VS IDE. Использование этого синтаксиса (как показано ниже Валентином) позволяет классу CSS определять динамические атрибуты и отлично работает.

Answer 1

Вы можете использовать {{ и }} внутри <style>:

<style> 
     .p { background-color: {{name}}; } 
</style> 

Try: http://plnkr.co/edit/MMgRJP0fFCowE1rxcULM?p=preview

Answer 2

Вы можете попробовать использовать ng-style для этого:

<element ng-style="function_result() or expression"></element>