Angularで色の変更を実装する方法

この記事では、Angular で li タグをクリックして色を変更するコア コードを主に紹介します。必要な方は参照してください。

ng-repeat トラバーサルの後に li タグをクリックして境界線の色を変更します。 :

<ul ng-if="params.questionTypeId == 8">
<li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click=&#39;li_click($index)&#39;
ng-class=&#39;{focus: $index == focus}&#39;> {{word}}</li>
</ul>

js コード:

$scope.li_click = function (i) {
$scope.focus = i;
};

手順:

①25edfb22a4f469ecb59f1190150159c6 要素の click イベントで、$scope オブジェクトに追加された "li_click()" メソッドが実行されます。 ②このメソッドでは、実引数として「$index(行番号の値)」をメソッドに渡し、「$index」の値に「focus」属性の値を設定しています

③ したがって、行が8b5f8b1972378d9df41b5958cd285f77 要素をクリックすると、「focus」属性の値が対応する「$index」に変更されます。キー/値オブジェクトを通じて要素に追加する必要があるスタイル。8b5f8b1972378d9df41b5958cd285f77 要素がクリックされたとき、「$index」変数値は「focus」属性値と同じであることを意味します。 "$index==focus" の戻り値が true であることを確認してください

⑤ この時点で、"ng-class" のスタイル指示値が "focus" に変更されます

⑥ 上記の分析と操作の後、 8b5f8b1972378d9df41b5958cd285f77 要素をクリックすると境界線を追加する効果が得られました。 。

関連記事:

three.jsを使った3Dシネマの実装方法

Vueでサイドスライドメニューコンポーネントを実装する方法

webpackでマルチページ開発を実装する方法

標準Vueの処理方法(詳細チュートリアル)

nginx+nodeを使ったhttpsのデプロイ方法

Vueを使ったテンキーコンポーネントの実装方法

vueにおける父子コミュニケーションの詳細な解釈

詳細Vue.js の ref の紹介 ($refs) 使用法

$refs Vue で DOM にアクセスする (詳細なチュートリアル)

jQuery でポップアップ ウィンドウの下のスライド効果を無効にする下部ページを実装する方法

React Nativeでprop-typesを使用する方法属性確認を実装する

ブートストラップグリッドシステム(詳細チュートリアル)

以上がAngularで色の変更を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。