How do I conditionally apply CSS styles in AngularJS?

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically: ng-class - use when the set of CSS styles is static/known ahead of time ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values. ng-show and ng-hide - use if you only need to show or hide something (modifies CSS) ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM) ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM) ng-disabled and ng-readonly - use to restrict form element behavior ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above. When the user changes the UI, Angular will automatically update the associated elements on the page. Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class. ng-class accepts an "expression" that must evaluate to one of the following: a string of space-delimited class names an array of class names a map/object of class names to boolean values Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class: <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}"> ... HTML to display the item ... <input type="checkbox" ng-model="item.checked"> </div> Above, we used ng-class expression type #3 - a map/object of class names to boolean values. Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this. ng-style accepts an "expression" that must evaluate to: an map/object of CSS style names to CSS values For a contrived example, suppose the user can type in a color name into a texbox for the background color (a jQuery color picker would be much nicer): <div class="main-body" ng-style="{color: myColor}"> ... <input type="text" ng-model="myColor" placeholder="enter a color name"> Fiddle for both of the above. The fiddle also contains an example of ng-show and ng-hide. If a checkbox is checked, in addition to the background-color turning pink, some text is shown. If 'red' is entered in the textbox, a div becomes hidden.

ng-mouseover and leave to toggle item using mouse in angularjs

HTML Code :

<div ng-controller="Ctrl">
    <ul ng-repeat="task in tasks">
        <li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">{{task.name}}
              <span ng-show="task.editable"><a>Edit</a></span>
        </li>
    </ul>
</div>


JS  Funtion :

(function () {
    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        app.controller("Ctrl", function ($scope) {
            $scope.tasks = [{
                name: 'foo'
            }, {
                name: 'bar'
            }];

            $scope.enableEdit = function (item) {
                item.editable = true;
            };

            $scope.disableEdit = function (item) {
                item.editable = false;
            };
        });

        angular.bootstrap(document, ['myApp']);
    });


}());