Angularjs Change color at a wrapper on radio button checked

Question

I'm a complete newbie in angular. And it's the whole day that I'm struggling after this thing.

This is my code:

<div class="row lines" ng-class="class" ng-model="hotel">
        <div class="col-xs-6">
            <label class="control radio">
                <input type="radio" id="hotel3" name="hotel" value="LeonardodaVinci" ng-model="hotel">
                <span class="control-indicator"></span>
                NH Leonardo da Vinci
            </label>
        </div>
        <div class="col-xs-3 text-center">
            € 280.00

        </div>
        <div class="col-xs-3 text-center">
            € 320.00
        </div>

    </div>

    <div class="row lines" ng-class="class" ng-model="hotel">
        <div class="col-xs-6">
            <label class="control radio">
                <input type="radio" id="hotel4" name="hotel" value="Giustiniano" ng-model="hotel">
                <span class="control-indicator"></span>
                Nh Giustiniano
            </label>
        </div>
        <div class="col-xs-3 text-center">
            € 280.00
        </div>
        <div class="col-xs-3 text-center">
            € 320.00
        </div>
    </div>
    <div class="row lines" ng-class="class">
        <div class="col-xs-6">
            <label class="control radio">
                <input type="radio" id="hotel4" name="hotel" value="GrandHotelTiberio" ng-model="hotel">
                <span class="control-indicator"></span>
                Grand Hotel Tiberio
            </label>
        </div>
        <div class="col-xs-3 text-center">
            € 280.00
        </div>
        <div class="col-xs-3 text-center">
            € 320.00
        </div>
    </div>

What I need is simple: I need to add a class to my wrapper div .lines in this case. After reading a lot of examples in the net I've tryed this:

<div class="row lines" ng-class="('{{hotel}}' === 'LeonardodaVinci') ? 'selected' : ''">

and this:

<div class="row lines" ng-class="{ 'selected' : '{{hotel}}' === 'LeonardodaVinci' }">

but none of them looks working. In my inspector I can see that {{hotel}} get the right value in both examples above but none of them add a class to my wrapper

I've even found this answer that is basically the same as mine: Angularjs - How to change background color using radio button but it doesn't look working and I didn't make a repeater yet.

Thanks

Answer 1

The directive operates in three different ways, depending on which of three types the expression evaluates to:

1.If the expression evaluates to a string, the string should be one or more space-delimited class names.

2.If the expression evaluates to an array, each element of the array should be a string that is one or more space-delimited class names.

3.If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

So, using form 3. we can use

ng-class="{selected: hotel === 'LeonardodaVinci'}"