How to change a CSS class when clicking with AngularJS

Question

How to change a CSS class when clicking with AngularJS

I want to implement a feature where the CSS class of a div element changes when clicked. The default class should be 'input-large', and on click, it should change to 'input-large input-active'. This change should occur when clicking on the username field and revert back when clicking elsewhere.

<div class="input-large">
    <label class="input-label">Username</label>
    <input class="input-field" type="text">
</div>

<div class="input-large input-active">
            <label class="input-label">Username</label>
            <input class="input-field" type="text">
</div>

Can someone guide me on how to achieve this div change on click?

javascript html css angularjs

Answer 1

Answer №1

Make sure to incorporate ng-click and ng-blur by following the code snippet below:

http://jsfiddle.net/atXAC/11/

<div ng-controller="MyCtrl">

<div ng-class="{'active':hasFocus==true,'inactive':hasFocus==false}">Enter your Name here</div>
<input type="text" ng-model="user.name" ng-click="hasFocus=true" ng-customblur="onBlur()" required id="name"/>

</div>

Include this JavaScript code in your project:

var myApp = angular.module('myApp', []);

myApp.directive('ngCustomblur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngCustomblur']);      
    element.bind('blur', function(event) {        
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  }
}]);

function MyCtrl($scope) {
    $scope.onBlur = function(){        
        $scope.hasFocus = false;
    }
}

Adjust it accordingly for your form - it should work seamlessly.

Answer 2

Make sure to incorporate ng-click and ng-blur by following the code snippet below:

http://jsfiddle.net/atXAC/11/

<div ng-controller="MyCtrl">

<div ng-class="{'active':hasFocus==true,'inactive':hasFocus==false}">Enter your Name here</div>
<input type="text" ng-model="user.name" ng-click="hasFocus=true" ng-customblur="onBlur()" required id="name"/>

</div>

Include this JavaScript code in your project:

var myApp = angular.module('myApp', []);

myApp.directive('ngCustomblur', ['$parse', function($parse) {
  return function(scope, element, attr) {
    var fn = $parse(attr['ngCustomblur']);      
    element.bind('blur', function(event) {        
      scope.$apply(function() {
        fn(scope, {$event:event});
      });
    });
  }
}]);

function MyCtrl($scope) {
    $scope.onBlur = function(){        
        $scope.hasFocus = false;
    }
}

Adjust it accordingly for your form - it should work seamlessly.

Answer 3

Answer №2

A different strategy is to dynamically add the CSS class within the onClick function in your controller.

Answer 4

A different strategy is to dynamically add the CSS class within the onClick function in your controller.

How to change a CSS class when clicking with AngularJS

Answer №1

Answer №2

Similar questions

The compatibility issue between Angular's ngModel and Value in input components

Struggling to deploy my Laravel application with Tailwind CSS on the frontend. However, running "npm run dev" results in an error

Dynamically attach data to the state.go function and access it in the resolve property

Switching the active className in React and Next.js based on selection status

What could be the reason behind the varying outcomes browsers provide for the JavaScript expression new Date(-105998400000)?

Exploring the capabilities of referencing MongoDB documents with the populate method in Node.js

The JQuery datepicker fails to display the current date

Utilizing JavaScript to verify the presence of a div element within dynamically injected HTML code

What is the best way to widen each tab so they fill up the entire width of the content block?

How can I add a character at a precise location while keeping the existing tags intact

What could be causing the html.fromstring function to malfunction in my code?

Exploring the process of logging large objects in Node.js 11 using the console command

Delivering a static Angular app through an Express Server

Are asynchronous promises thenable for chaining?

Creating a dynamic object with JavaScript using two arrays

Getting data before the Router is loaded following authentication with Angular 2+ - A comprehensive guide

What is the best way to ensure the dropdown box in a Bootstrap navbar automatically adjusts its width to fit within the

Is there a way to submit a form without displaying the values in the URL?

Which is better for handling events - jQuery delegation or function method?

Retrieve the ID value of the paragraph that was clicked on using the right-click function