Encountered issues arise when adding classes within table elements while having a class already applied to the entire table (such as a color applied to odd rows

<myClass tbody tr:nth-child(even) td>

). Upon inspecting the element using Developer Tools, it appears that no styles are assigned in element.style. To address this, instead of utilizing ng-class, I opted for ng-style, where the new CSS attribute is visible inside element.style. Here's the code snippet that proved effective for me:

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar undergoes evaluation, determining the style to be applied to each <td> based on the value of myvar, overwriting the existing style applied by the CSS class for the entire table.

UPDATE

To apply a class to the table under specific conditions, such as upon visiting a page or other scenarios, you can utilize this structure:

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

The key to activating an ng-class lies in specifying the class to apply along with a true or false statement. A true value applies the class, while false does not. In this example, two route checks are made with an OR between them, ensuring that if we are in either /route_a or route_b, the active class will be applied.

This approach functions based on a logic function that returns either true or false.

In the initial example, ng-style is conditioned by three statements. If all are false, no style is applied. However, at least one statement will evaluate to true, leading to the application of the corresponding style. As any non-empty array equates to true, the resulting array will have only one true value, ultimately applying the remaining style due to the usage of OR in the overall response.

Additionally, let me provide you with the isActive() function:

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

NEW UPDATE

Here's a handy tip for applying a class based on a variable's value, like displaying different icons depending on the content within a div. The following code proves beneficial, especially in ng-repeat situations:

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

Icons sourced from Font Awesome

When ng-class cannot be utilized, such as when styling SVG elements, this method works effectively:

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

(It may require the latest unstable version of Angular to use ng-attr-, I am currently using 1.1.4)

An article discussing working with AngularJS and SVG has been published by me. It addresses this particular issue along with several others. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

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

Here is the code snippet:

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

The CSS styles are provided below:

.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);
}

Following this advice made a significant impact on my situation

<a ng-style="{true: {marginLeft: '30px'}, false: {}}[deleteTriggered]">...</a>

One way to implement conditional styling is by using a ternary expression. Here are two methods to achieve this effect:

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

Alternatively, you can also use the following approach:

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

If you're looking for a quick and easy way to apply CSS styles with just one or two properties, consider this option:

Here's how it works:

<tr ng-repeat="element in collection">
    [...add your own code here...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...add more of your code here...]
</tr>

And here's the corresponding controller code:

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

Take a look at this example

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Example of Conditional CSS Class Changes with AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

AngularJS version 1.2.0rc introduced issues with ng-class and ng-attr-class when used with SVG elements. Previously, these directives worked fine, even with regular binding inside the class attribute.

Unfortunately, none of the following methods work anymore:

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

To workaround this problem, I have resorted to using

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

and then applying styles using

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

In the near future, a new method for applying styles conditionally is emerging - through the use of scoped styles.

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

Currently, only Firefox supports scoped styles, but this may change as more browsers adopt this feature.

Recently, I stumbled upon a new method that could be quite beneficial for some individuals. This approach allows you to modify a CSS rule within a style element without the need for repetitive angular directives like ng-style, ng-class, ng-show, ng-hide, ng-animate, and others.

The technique involves utilizing a service with variables set by a controller and monitored by an attribute-directive named "custom-style". The versatility of this strategy opens up various possibilities, and I have provided some general advice along with a working example on this link.

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

One recommended approach would be to validate a condition in your controller using a function that returns either true or false.

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

Then, within your controller, verify the condition with the following code:

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

Keep an eye out for this: if the CSS style includes dashes, be sure to eliminate them. For example, if you're trying to define the background-color, the proper syntax would be:

ng-style="{backgroundColor:myColor}"