<!DOCTYPE html>
<html>
<head>
<title>AngularJS Conditional and dynamic Styling with example</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<style type="text/css">
hr{
padding: 20px 0px;
}
</style>
</head>
<body>
<!-- Main Content -->
<div class="container" ng-app="demoLearningTurn">
<div class="contents" ng-controller="mainCtrl">
<h1>Dynamic styling by ngClass</h1>
<input type="button" class="btn btn-primary" value="Big Red Text" ng-click="txtClass='red-bg-txt'">
<input type="button" class="btn btn-primary" value="Medium Yellow Text" ng-click="txtClass='yellow-md-txt'">
<input type="button" class="btn btn-primary" value="Reset" ng-click="txtClass=''">
<h6 ng-class="txtClass">Learning Turn Demo Text</h6>
<hr/>
<h1>Conditional styling by ngStyle</h1>
<select ng-model="txtColor" ng-options="code as color for (code, color) in txtColorList">
</select>
<h6 ng-style="{color:txtColor}">Learning Turn Demo Text</h6>
<hr/>
<h1>Conditional styling by ngShow</h1>
<input type="button" class="btn btn-primary" value="Show/Hide Text" ng-click="txtStatus=!txtStatus">
<h6 ng-show="txtStatus">Learning Turn Demo Text</h6>
<hr/>
<h1>Conditional styling by ngHide</h1>
<input type="button" class="btn btn-primary" value="Show/Hide Text" ng-click="txtStatus=!txtStatus">
<h6 ng-hide="txtStatus">Learning Turn Demo Text</h6>
<hr/>
<h1>Disable or Active by ngDisabled</h1>
<label>Click to Disable/Active button: <input type="checkbox" ng-model="checked"></label><br/>
<button ng-disabled="checked" class="btn btn-primary">Demo Button</button>
<hr/>
<a href="http://learningturn.com/angular-js/angularjs-condit…ing-with-example/" title="AngularJS Conditional and dynamic Styling with example">AngularJS Conditional and dynamic Styling with example</a>
</div>
</div>
</body>
</html>
// Create AngularJS application
var app = angular.module('demoLearningTurn',[]);
// Create Controller with name mainCtrl
app.controller('mainCtrl', function($scope){
$scope.txtClass= 'default-txt';
$scope.txtColorList = {
'#8A2BE2':'BlueViolet ',
'#5F9EA0':'CadetBlue ',
'#DC143C':'Crimson ',
'#8B008B':'DarkMagenta '
};
$scope.txtColor = '#5F9EA0';
$scope.txtStatus = true;
});
.red-bg-txt{
color: red;
font-size: 36px;
font-weight: bold;
}
.yellow-md-txt{
color: yellow;
font-size: 22px;
font-weight: normal;
}
.default-txt{
color: #fff;
background: #000;
font-size: 16px;
text-decoration: underline;
width: 200px;
text-align: center;
}