CODEWITHSUNDEEP
javascriptangularjs
ace
ace

Reputation: 283

Add class to div when certain values chosen

I have used angular to show content when choosing values from dropdown.

Now I'm looking for solution to add class to div when values has been chosen. So when choosing certain values from drop down then add certain css class to div.

What is good/correct way to add css class depending on values user has chosen from drop down? For example user choose A, A and Adult (first values from 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 jsfiddle example

Upvotes: 0

Views: 163

Answers (2)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

You can use ngClass

Formate is like this

ng-class="{'className':expression}"

controller

$scope.temp=true

view

<div ng-class="{'myClass':temp}">

If temp is true then myClass will be added to your div

Upvotes: 1

Hmahwish
Hmahwish

Reputation: 2232

Use ng-class

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

https://docs.angularjs.org/api/ng/directive/ngClass

Here in your div 

<div ng-class="{add-class:condition}">Text</div>

Upvotes: 1

Related Questions