How do I conditionally apply CSS styles in Angular

Question

Q1. Suppose I want to alter the look of each "item" that a user marks for deletion before the main "delete" button is pressed. (This immediate visual feedback should eliminate the need for the proverbial "are you sure?" dialog box.) The user will check checkboxes to indicate which items should be deleted. If a checkbox is unchecked, that item should revert back to its normal look.

What's the best way to apply or remove the CSS styling?

Q2. Suppose I want to allow each user to personalize how my site is presented. E.g., select from a fixed set of font sizes, allow user-definable foreground and background colors, etc.

What's the best way to apply the CSS styling the user selects/inputs?

Answer 1

One more (in the future) way to conditionally apply style is by conditionally creating scoped style

<style scoped type="text/css" ng-if="...">

</style>

But nowadays only FireFox supports scoped styles.

Answer 2

This works well when ng-class can't be used (for example when styling SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(I think you need to be on latest unstable Angular to use ng-attr-, I'm currently on 1.1.4)

I have published an article on working with AngularJS+SVG. It talks about this issue and numerous others. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Answer 3

You can use ternary expression. There are two ways to do this:

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

or...

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

Answer 4

span class="circle circle-{{selectcss(document.Extension)}}">

and code

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

css

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

Answer 5

well i would suggest you to check condition in your controller with a function returning true or false .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

and in your controller check the condition

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

Answer 6

As of AngularJS v1.2.0rc, ng-class and even ng-attr-class fail with SVG elements (They did work earlier, even with normal binding inside the class attribute)

Specifically, none of these work now:

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

As a workaround, I've to use

ng-attr-otherAttr="{{current==this_element?'active':''}}"

and then style using

[otherAttr='active'] {
   ... styles ...
}