javascript - 选择某些值时将类添加到div

从下拉列表中选择值时，我曾使用angular来显示内容。

现在，我正在寻找在选择值后将类添加到div的解决方案。因此，当从下拉列表中选择某些值时，请向div中添加某些CSS类。

根据用户从下拉列表中选择的值，添加CSS类的好/正确方法是什么？例如，用户选择A，A和Adult（下拉菜单中的第一个值）。

<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>

这是jsfiddle example

最佳答案

使用ng-class

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

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

在您的div中

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

关于javascript - 选择某些值时将类添加到div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31933973/