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

Stack Overflow用户

提问于 2021-09-21 21:23:56

回答 1查看 18关注 0票数 1

我有一个放大镜，当你悬停或点击它时，它会扩展到一个完整的搜索栏。我想要的功能是，当搜索栏是活动的，它将保持扩展，直到单击关闭，或将保持扩展，如果栏有一个值。我有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

Stack Overflow用户

发布于 2021-09-22 05:18:49

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69275712

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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