AngularJS über ng-Mehrere Implementierungsmethoden der class Anweisung

Einleitung

Während der Entwicklung stoßen wir oft auf Anforderungen, bei denen ein Element in verschiedenen Zuständen unterschiedliche Erscheinungsformen haben muss. Und unter diesen Erscheinungsformen verstehe ich natürlich die Änderung der CSS-Eigenschaften. Um die dynamische Änderung der Eigenschaftswerte zu erreichen, müssen wir die dynamische Änderung der class-Eigenschaft umsetzen.

Ich werde hier drei Methoden vorstellen, um dies zu erreichen. Sie können je nach Bedarf die passende Methode auswählen. Schauen wir uns das an.

Erste Methode: durch Datenbindung (nicht empfohlen)

<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>

Im Internet gibt es viele nicht empfohlene Methoden. Ehrlich gesagt, warum sollte man nicht durch diese Methode Änderungen vornehmen können, wenn AngularJS zweiweisige Datenbindung so mächtig ist! Nach einigen Recherchen habe ich herausgefunden: „Der Controller ist in der Regel so mysteriös, dass ich ihn für einen reinen JavaScript-Objekt halte, was ich wünsche“. Natürlich gibt es keine klare Festlegung, dass dies nicht erlaubt ist, und ich finde es sogar sehr praktisch, damit HTML-Elemente so verändert werden können, wie sie möchten! Gleiches gilt für das img-Element, bei dem der src-Wert nicht durch andere Methoden geändert werden kann, aber durch diese Methode ist es möglich! Natürlich fühlt sich diese Methode auch etwas seltsam an, und ich denke, man kann es sich nicht leisten, es nicht zu tun.

第二种：通过对象数组

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

实现很简单，就是当className为true时class为change1，相反则为change2

但是有一点不好的是只允许一个元素具有两种状态，尽管如此！基本也满足需求了，我一般都用这个。简单、直观！

第三种：通过key/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则为change3，我个人认为这是比较推荐的，可以弥补第二种方法的些许不足。

总结

如果我们能够在项目中灵活地运用这些指令，这将给我们带来极大的便利，我们在解决问题时会有更多的思路。这样，我们可以组合使用这些指令来快速解决一些比较棘手的问题！这就是这篇文章的全部内容，希望对大家学习或工作有所帮助。如有疑问，欢迎留言交流。