Question

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

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

根据用户从下拉列表中选择的值，添加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

Answer 1

使用ng-class

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

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

这里有你的div

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

Answer 2

您可以使用ngClass

Formate就像这样

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

控制器

$scope.temp=true

查看

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

如果temp为true，那么myClass将被添加到你的div

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

2 个答案: