I have utilized Angular to display content based on selected values from a dropdown menu.
Now, I am seeking a solution to dynamically add a CSS class to a div when specific values are chosen. In other words, I want to apply certain styling to the div based on the user's selections in the dropdown.
What is the best approach to achieve this? For example, if the user selects options A, A, and Adult (the first values from the dropdown).
<div class="ticketsystem" ng-controller="Main" ng-app>
<div>selections = {{selections}}</div>
<div class="choose">
<p>Choose</p>
<p>From</p>
<select ng-model="selections[0]" ng-options="i.id as i.name for i in items">
<option value=""></option>
</select>
<p>To</p>
<select ng-model="selections[1]" ng-options="i.id as i.name for i in items">
<option value=""></option>
</select>
<p>Group</p>
<select ng-model="selections[2]" ng-options="i.id as i.name for i in itemsb">
<option value=""></option>
</select>
</div>
<div class="show-this-3" ng-show="
selections[0] == items[1].id && selections[1] == items[1].id && selections[2] == itemsb[0].id ||
selections[0] == items[0].id && selections[1] == items[0].id && selections[2] == itemsb[0].id ||
selections[0] == items[2].id && selections[1] == items[2].id && selections[2] == itemsb[0].id">
<p>Tickets</p>
<div class="content">
<div class="ticket">Ticket 1</div>
<div class="ticket">Ticket 2</div>
</div>
</div>
</div>
<!-- Add class to this div -->
<div class="add-class">Text</div>
Here is an example on jsfiddle