0

スコープ内の要素を対象にして、クラス名またはスタイルを変更する簡単な方法はありますか?

以前は Jquery を使用し、単純に .parent().find を使用して相対要素をターゲットにしていましたが、非常に単純なタスクを達成するための単純なソリューションが見つかりません。

ほとんどのソリューションは非常に複雑に見えますが、angular によって多くのコードが不要になると確信しています。

ng-click 要素を基準にして、またはスコープのルートからターゲットを指定し、新しいクラス名を適用したいと考えています。

これは、H1 のクラスを変更するボタンが必要な非常に基本的なシナリオです。

<div>
    <h1 class="Blue">Welcome</h1>
    <ul>
       <li>
           <button ng-click="myFunction()">Change H1 to Red</button>
       </li>
    </ul>
</div>

アドバイスをいただければ幸いです。

4

1 に答える 1

8

クラスng-classを切り替える場合は、いくつかのプロパティを使用してオンにするのが最善です。

html:

<div>
    <h1 ng-class="{Blue: !clicked, Red: clicked}">Welcome</h1>
    <ul>
       <li>
           <button ng-click="myFunction()">Change H1 to Red</button>
       </li>
    </ul>
</div>

コントローラ：

$scope.myFunction = function() {
   $scope.clicked = true;
}

ただし、これを行うこと$eventで、関数を渡して生の要素を取得することもできます。ただし、これは「角度のある」方法ではありません。

html:

<button ng-click="myFunction($event)">Change H1 to Red</button>

コントローラ：

$scope.myFunction = function(e) {
   console.log(e.srcElement);
}
于 2013-11-28T16:59:19.610 に答える