ホームページ > php教程 > PHP开发 > AngularJS で ng-class を使用する方法についての簡単な説明

AngularJS で ng-class を使用する方法についての簡単な説明

高洛峰
リリース: 2016-12-07 10:33:10
オリジナル
1326 人が閲覧しました

3 つの方法があります:

1. $scope を介したバインド (推奨されません)
2. キー/値のキーと値のペアを介したバインド

実装方法:

1. (推奨されません):

function ctrl($scope) { 
  $scope.className = "selected";
}
ログイン後にコピー

<div class="{{className}}"></div>
ログイン後にコピー

2. オブジェクト配列によるバインド:

function ctrl($scope) { 
  $scope.isSelected = true;
}
ログイン後にコピー

<div ng-class="{true:&#39;selected&#39;,false:&#39;unselected&#39;}[isSelected]"></div>
ログイン後にコピー

isSelected が true の場合、isS が false の場合、選択されたスタイルを追加します。選択されていないスタイル。

3. キーと値のペアによるバインド:

function ctrl($scope) { 
  $scope.isA = true;
  $scope.isB = false;
  $scope.isC = false;
}
ログイン後にコピー

<div ng-class="{&#39;A&#39;:isA,&#39;B&#39;:isB,&#39;C&#39;:isC}"></div>
ログイン後にコピー

isA が true の場合は A スタイルを追加し、isC が true の場合は C スタイルを追加します。

<ion-list>
  <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
    {{project.title}}
  </ion-item>
</ion-list>
ログイン後にコピー

プロジェクト ループに従って ion-item を作成します。 activeProject が現在ループされているプロジェクトである場合、アクティブなスタイルを追加します。

いくつかの注意事項:

1. コントローラー $scope にはデータと動作のみを含める必要があるため、最初の方法はお勧めできません

2. ng-class は関連するスタイルを追加し、class と一緒に使用できます


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート