0

Web ページのテーマを変更するアイデアがあります。私が使用しているCSSは次のとおりです。

html.darkBlue {
    .block-content.light-tint-bg {
        background: #fefefe;
        border: 1px solid #777777;
        color: #7b7b7b;
    }
}
html.black {
    .block-content.light-tint-bg {
        background: #333333;
        border: 1px solid #111111;
    }
}

アイデアは、HTML にクラスを追加し、使用するクラスに応じてテーマを使用するというものです。

しかし、Angular ではどうすれば切り替えることができるでしょうか? アドレスのようなリンクを考えていましたが、2 つのクラスを切り替える方法がわかりません。

4

2 に答える 2

1

@Davin Tryon と同様のアプローチを使用しますが、次のような場合を除きます。

コントローラーで:

$scope.applied = false;

次に、ng-class

ng-class="{true: 'applied', false: 'notApplied'}[applied]"

appliedしたがって、applyed の値が true または false であることに基づいて、true の場合と false の場合に式のプロパティの値を適用しますnotApplied。

編集：

あなたのコメントに基づいてOK：

http://jsfiddle.net/muLPT/

<div ng-app ng-class="background">
    Hello World

    <input type="button" ng-click="background = 'black'" value="black">
    <input type="button" ng-click="background = 'red'" value="red">
    <input type="button" ng-click="background = 'blue'" value="blue">
</div>


.black {
    background: black;
}
.red {
    background: red;
}
.blue {
    background: blue;
}

これはあなたが望むことをするはずです。

基本的に、「背景」クラスの値を、クリックされた値に変更するだけです。

サンプルは、jdfiddle からdivはデモできないため、上で実行されます。htmlそれが適用された場合、同じように動作するはずですhtml

于 2013-10-05T08:16:21.667 に答える
1

使用できますng-class。ここにドキュメントがあります。

ng-class式を使用してクラスを解決できます。

次の例は、使用法を示しています。

<p ng-class="{applied: 1 == 1, notApplied: 1 == 0}">Example</p>

式1 == 1は true に解決され、クラス 'applied' がclass属性に追加されます。

クリックを処理してクラスを切り替えるには、スコープ変数を作成します。たとえば、これはclickedクラスを追加/削除するフィールドを切り替えます:

<div ng-click="clicked = !clicked" ng-class="{black: clicked, darkBlue: !clicked}"></div>
于 2013-10-05T08:09:03.783 に答える