CODEWITHSUNDEEP
jqueryangularjs
ace
ace

Reputation: 283

Add class using ng-class depending on value user choose

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

I need 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.

I know that it can be done by ng-class, but I'm struggling to make it work here in my case.

How to add css class depending on values user has chosen from drop down using ng-class?

Example add class on the case:

selections[0] == items[0].id && selections[1] == items[0].id && selections[2] == itemsb[0].id

Here is code:

<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 ng-class="add-class">Text</div>

Here is jsfiddle example

Upvotes: 0

Views: 979

Answers (2)

Fissio
Fissio

Reputation: 3758

How about something like this? Basically I just added the class values to your item objects based on your example of a-a-a so I assumed you wanted the first item of the items array to be a and the second b, though those can of course be changed in whatever way you need to.

http://jsfiddle.net/agenjn1c/3/

Controller:

$scope.items = [{
    id: 'id-1',
    name: 'A',
    classValue: 'a'},
{
    id: 'id-2',
    name: 'B',
    classValue: 'b'}];

$scope.getDivClass = function() {
    function findClass(collection, id) {
        var item = _.find(collection, function(item) {
            return item.id === id;
        })
        if (item !== undefined) return item.classValue;
    }
    var first = findClass($scope.items, $scope.selections[0]);
    var second = findClass($scope.items, $scope.selections[1]);
    var third = findClass($scope.itemsb, $scope.selections[2]);
    return first + "-" + second + "-" + third;
}

HTML:

<div ng-class="getDivClass()">Text</div>

Upvotes: 1

michelem
michelem

Reputation: 14590

Just do something like this:

<div ng-class="{'add-class': selections[0] === 'xyz'}">Text</div>

If you could be more precise on your question I could write more specific code.

To check if every dropdown are selected and then assign a class:

<div ng-class="{'add-class': selections[0] && selections[1] && selections[2]}">Text</div>

Upvotes: 1

Related Questions