Question

我是角色的完整新手。而这一整天我都在为此事而苦苦挣扎。

这是我的代码：

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

我需要的是简单的：在这种情况下，我需要在我的包装器div .lines中添加一个类。在网上阅读了很多例子后，我尝试了这个：

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

和此：

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

但他们都没有看起来有效。在我的检查器中，我可以看到{{hotel}}在上面的两个示例中都得到了正确的值，但没有一个在我的包装器中添加一个类

我甚至发现这个答案与我的答案基本相同：Angularjs - How to change background color using radio button 但它看起来不起作用，我还没有制作转发器。

由于

Answer 1

关闭，在Angular指令中写入时放弃{{}}：

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

Answer 2

该指令以三种不同的方式运行，具体取决于表达式评估的三种类型中的哪一种：

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.

因此，使用表单3.我们可以使用

ng-class =＆＃34; {selected：hotel ===＆＃39; LeonardodaVinci＆＃39;}＆＃34;

Angularjs在选中的单选按钮上更改包装器的颜色

2 个答案: