AngularJSでのngに関する-classディレクティブのいくつかの実現方法の詳細

前書き

開発中にはこのようなニーズがよくあります。ある要素が異なる状態で異なる外観を呈示する必要があります。そして、この外観はCSSの属性を変更することで実現されます。属性値の動的変更を実現するために、class属性値を動的に変更する必要があります。

ここで3つの方法を紹介します。皆さんは自分のニーズに応じて選択してください。以下に見てみましょう。

第1種：データの双方向バインディングを通じて（不推奨）

<div ng-controller="firstController">
  <div ng-class="{{className}}"></div>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className='change';
   )
</script>

オンラインで様々な不推奨されていますが、実際にはangularJSの双方向データバインディングが非常に優れているので、なぜこの方法を通じて変更できないのでしょうか！理由を調べてみました：「controllerがclassnameを扱っているのは私の意見では常に奇妙な感じがします。私はcontrollerがクリーンな纯javascriptの意味のobjectであることを望んでいます」もちろん、明文で禁止されていないということはありません。むしろ、私はこれが非常に便利だと思います。HTMLの要素がどのように変化するかを自由に設定できるようにします！同様に、img要素のsrc属性も他の方法で変更することはできませんが、この方法で変更することができます！もちろん、この方法は少し奇妙な感じがしますが、個人的には以下のように考えます：不得已の選択です~

第2種：オブジェクト配列を通じて

<div ng-controller="firstController">
 <div ng-class="{true:'change1',false:'change2'}[className]\/div>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className=true;
   )
</script>

実現は非常に簡単で、classNameがtrueの場合、classがchangeになります1、逆の場合はchangeになります2。

ただし、一つの要素にしか状態を設定できないという欠点があります。しかし、そう言っても、基本的には必要な機能を満たしています。私はこれを使っています。シンプルで直感的です。

第3種：キーを通じて/value

<div ng-controller="firstController">
  <div ng-class="{'change1':select','change2':choice','change3':lala}\
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.select=true;
     $scope.lala=true;
   )
</script>

lalaがtrueの場合、classはchangeになります3個人的にはこれは非常に推奨されます。第二種方法の少しの欠点を補うことができます。

まとめ

プロジェクトでこれらの指示を柔軟に使用できると非常に便利になります。問題解決の際に多くの思いつきがあります。これにより、困難な問題を迅速に解決するためにこれらの指示を組み合わせて使用できます。これはこの記事のすべてです。学習や仕事に役立つことを願っています。何か疑問があれば、コメントを残してください。