Thursday, March 12, 2015

ng-class directive

The ng-class directive is used to dynamically alter the style class applied to an element in the HTML page based on the value binding of a different element or $scope item. This directive can be used to apply selective style elements to elements in the HTML page based on user preferences or values from the model or other elements in the page.

The ng-class directive evaluates an expression and derives the class to be applied based on the result of the expression. The following is the syntax for the ng-class directive.

<div ng-class="{expression}">

In the below example we allow the user to select a color from the Dropdown and apply appropriate class to the text element based on the value selected by the user.

<html ng-app>
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
color: red;
color: blue;
color: green;
Select Color: <select ng-model="selectedClass">
Selected Color: {{selectedClass}}
<div id="homePage" ng-class="{Red:'clsRed', Blue:'clsBlue', 'Green':'clsGreen'}[selectedClass]">
Dynamic Text Style


Search Flipkart Products:

No comments: