Различные способы реализации инструкции ng-class в AngularJS с подробным анализом

Введение

В разработке часто встречается необходимость, чтобы элемент отображался по-разному в различных состояниях, а так называемый вид, конечно, это изменение его css свойств, а для динамического изменения значений свойств нам нужно реализовать динамическую замену его свойств class.

В этом разделе я хочу представить три метода для реализации, вы можете выбрать способ в зависимости от своих потребностей, давайте посмотрим.

Первый способ: через двустороннюю привязку данных (не рекомендуется)

<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 могли меняться как им хочется! Точно так же src элемента img не может быть изменен с помощью других способов, но с помощью этого метода это возможно! Конечно, этот метод также может показаться несколько странным, на мой взгляд: можно поступить так, если нет другого выбора~

Второй способ: через массив объектов

<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 равна change1, в противном случае class равна 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. Я считаю, что это рекомендуется, так как это может補充第二种方式的点点遗憾~

Обобщение

Если мы можем灵活 использовать эти инструкции в проекте, это принесет нам много удобств. Когда мы решаем проблемы, у нас будет больше идей. Таким образом, мы можем комбинировать использование этих инструкций для быстрого решения некоторых проблем, которые могут бытьquite苦恼. Вот и все, что есть в этой статье. Надеюсь, это поможет вам в изучении или работе. Если у вас есть вопросы, вы можете оставить комментарий для обсуждения.