Home:ALL Converter>AngularJS - Remove/Add Class on element based off if element is active/hover/or contains a value

AngularJS - Remove/Add Class on element based off if element is active/hover/or contains a value

Ask Time:2021-09-22T05:23:55         Author:ashryan125

Json Formatter

I have a magnifying glass that when you hover or click on it, it expands to a full search bar. I want the functionality to be that when the search bar is active, it will stay expanded until clicked off, or will stay expanded if the bar has a value. I have the logic in jQuery, but this is my first time using AngularJS (not Angular) and I do not know how to turn this jQuery into a directive, or if there is some built in functionality I am missing. Thank you!

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");
});

Author:ashryan125,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/69275712/angularjs-remove-add-class-on-element-based-off-if-element-is-active-hover-or
yy