AngularJS - 如果元素处于活动状态/悬停/或包含值，则在元素上删除/添加类答案

【问题标题】：AngularJS - Remove/Add Class on element based off if element is active/hover/or contains a valueAngularJS - 如果元素处于活动状态/悬停/或包含值，则在元素上删除/添加类
【发布时间】：2021-11-15 10:02:19
【问题描述】：

我有一个放大镜，当您将鼠标悬停或单击它时，它会展开为完整的搜索栏。我希望功能是，当搜索栏处于活动状态时，它将保持展开状态，直到单击关闭，或者如果栏有值则保持展开状态。我有 jQuery 中的逻辑，但这是我第一次使用 AngularJS（不是 Angular），我不知道如何将这个 jQuery 转换为指令，或者我是否缺少一些内置功能。谢谢！

jQuery("#inpt_search").on("focus", function () {
 jQuery(this).parent("label").addClass("active");
});

jQuery("#inpt_search").on("blur", function () {
 if (jQuery(this).val().length == 0)
   jQuery(this).parent("label").removeClass("active");
});

【问题讨论】：

标签： html jquery angularjs

【解决方案1】：

var myApp = angular.module('myApp', []);
// set for Home Controller
myApp.controller('HomeCtrl', function($scope) {
  $scope.blueClass = function() {
      $scope.class_name = "blue";
      $scope.multi_message ="Blue Class Added";
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<html>
  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  </head>

  <body ng-app="myApp">
    <div class="container" ng-controller="HomeCtrl">

      <div class="alert" ng-class="{blue:'bg-info', red:'bg-danger',green:'bg-success' }[class_name]">{{multi_message}}</div>

      <a class="btn btn-info" ng-click="blueClass()"> Blue Class</a>
    </div>
  </body>
</html>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到更多关于如何写出好的答案的信息。 stackoverflow.com/help/how-to-ask