AngularJS -根据元素是否处于活动状态/悬停/包含值来删除/添加元素上的类

AngularJS是一种流行的前端开发框架，用于构建动态的Web应用程序。它基于JavaScript，并提供了一套强大的工具和功能，使开发人员能够轻松地构建交互式的用户界面。

在AngularJS中，可以使用ng-class指令根据元素的状态来添加或删除类。ng-class指令可以接受一个对象作为参数，该对象的键是类名，值是一个布尔表达式，用于确定是否应该将该类添加到元素上。

以下是一个示例，演示如何根据元素的活动状态、悬停状态和包含的值来添加或删除类：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <style>
    .active {
      background-color: yellow;
    }
    .hover {
      color: red;
    }
    .has-value {
      font-weight: bold;
    }
  </style>
</head>
<body ng-controller="myCtrl">
  <input type="text" ng-model="inputValue" ng-class="{'has-value': inputValue, 'active': isActive, 'hover': isHover}">

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.isActive = false;
      $scope.isHover = false;
      $scope.inputValue = '';

      $scope.toggleActive = function() {
        $scope.isActive = !$scope.isActive;
      };

      $scope.toggleHover = function() {
        $scope.isHover = !$scope.isHover;
      };
    });
  </script>
</body>
</html>

在上面的示例中，我们定义了三个类：active、hover和has-value。根据元素的状态，我们使用ng-class指令将这些类添加到输入框上。