Hi rani,
The ng-switch directive is used to evaluate depending on an expression.
Syntax
<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>
You can use the ng-switch directive or you can also use switch case in Controller.
Check the below example of both the case.
Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
$scope.Color = "0";
$scope.Colors = [
{ Value: 1, Text: 'Red', Color: '' },
{ Value: 2, Text: 'Green', Color: '' },
{ Value: 3, Text: 'Blue', Color: ''}];
for (var i = 0; i < $scope.Colors.length; i++) {
switch ($scope.Colors[i].Value) {
case 1:
$scope.Colors[i].Color = 'Red';
break;
case 2:
$scope.Colors[i].Color = 'Green';
break;
case 3:
$scope.Colors[i].Color = 'Blue';
break;
default:
break;
}
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table>
<tr>
<td>
<table>
<tr>
<th>Color</th>
</tr>
<tr ng-repeat="color in Colors">
<td><span ng-style="{'color':color.Color}">{{ color.Text }}</span></td>
</tr>
</table>
</td>
<td valign="top">
<select ng-model="Color">
<option value="0">Select</option>
<option value="1">Red Color</option>
<option value="2">Green Color</option>
<option value="3">Blue Color</option>
</select>
<hr />
<div ng-switch="Color">
<div ng-switch-when="1" style="color: Red;">
You have selected Red.
</div>
<div ng-switch-when="2" style="color: Green;">
You have selected Green.
</div>
<div ng-switch-when="3" style="color: Blue;">
You have selected Blue.
</div>
<div ng-switch-default>
Select Color from DropDownList.
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Demo
