AngularJS ng-style の概念
この記事では、条件式を使用して AngularJS ng-style について説明します。 ng-style ディレクティブは、スタイルを HTML 要素にバインドします。
要素のスタイルを動的に更新する必要がある場合に使用されます。
AngularJS ng-style ディレクティブ
ng-style を条件式で使用して、何らかの条件に基づいて HTML 要素のスタイルを動的に設定できます。
たとえば、ボタンがあり、ホバーしている色に応じて異なる色にしたい場合は、条件式で ng-style を使用し、ボタンの背景色を依存するように設定します。 ホバリングされているかどうか。
ng-style の構文:
<ANY ng-style="Any Conditional or non-conditional expression"></ANY>
ng-style ディレクティブの値は、任意の条件付き二項式または三項式にすることができます。 さらに、コンソール内で定義されたコールバック関数を受け取ります。これは、コントローラが必要に応じて管理できます。
ng-style ディレクティブを使用して、指定された値に基づいてディスプレイと CSS スタイルを管理し、モデル値が変更されたときに ng-style が呼び出され、CSS スタイルが更新されるようにすることもできます。
ng-style ディレクティブは優先度レベル 0 で呼び出され、挿入制限はほとんどありません。 一部の CSS スタイリング名は ng-style オブジェクトの有効なキーワードではないため、CSS スタイリング キーを常に単一引用符で囲むことが重要です。
最後に、ng-style ディレクティブは、動的コンテンツを使用してレスポンシブ デザインを作成しようとしている開発者にとって強力なツールであると言えます。 アニメーションやトランジションを作成したり、さまざまなデバイス サイズにさまざまなスタイルを適用したりできます。
AngularJS で ng-Style ディレクティブを使用する手順
AngularJS で ng-style ディレクティブを使用するには、次の手順が必要です。
ng-styleディレクティブを HTML 要素に追加します。- 中括弧内にスタイル コンテンツを追加します。
- 指定された CSS プロパティの値を持つスタイル プロパティを追加します。 ng-style ディレクティブは、色、フォント、背景色など、すべての CSS プロパティをサポートしています。
AngularJS での ng-style ディレクティブの例
AngularJS ng-style をよりよく理解するための例について説明しましょう。
JavaScript コード:
var app = angular.module('ngStyleApp', []);
app.controller('ngStyle', function($scope) {
$scope.bar = "88%";
});
HTML コード:
<!DOCTYPE html>
<html>
<head>
<style>
.mainColor {
background-color: pink;
}
.AvenColor {
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="ngStyleApp" ng-controller="ngStyle">
<div class="mainColor">
<div class="AvenColor" ng-style="{'width':bar}">
<h1> {{bar}} Profile Complete</h1>
</div>
</div>
</body>
</html>
ここをクリック をクリックして、上記のコードのライブ デモンストレーションをテストします。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook