Tips for managing click events in my class

Question

Tips for managing click events in my class

I need assistance with dynamically adding and removing a class from a clicked element in AngularJS.

Here is an example of my code:

<li ng-repeat='test in tests' >
    <a href='' ng-click='pickTest($index, $event)'>{{test.title}}</a>
</li>

Here is my JavaScript:

 $scope.pickTest = function(index, event) {
     $(event.target).addClass('blur');
     //This code successfully adds the class 'blur' when an <a> tag is clicked
     //Now, I need to remove the class when another <a> tag is clicked
  };

Can anyone provide guidance on how to achieve this functionality?

Thank you!

javascript angularjs events

Answer 1

Answer №1

To conditionally append a class based on a certain condition, you can utilize the ng-class directive. It is not recommended to use $index within an ng-repeat as it can cause issues when filters are applied. Instead, you can create two functions: isActive() to handle the ng-class directive and setActive() to designate the active item.

angular.module('app', [])

  .controller('Ctrl', function($scope) {
  
    var activeTest = {};
  
    $scope.tests = [{
      title: 'Test 1'
    }, {
      title: 'Test 2'
    }, {
      title: 'Test 3'
    }, {
      title: 'Test 4'
    }];
  
    $scope.setActive = function(test) {
      activeTest = test;
    };
  
    $scope.isActive = function(test) {
      return angular.equals(activeTest, test);
    };
  
  });

.blur {
  color: red;
}

<div ng-app="app" ng-controller="Ctrl">
  <ul>
    <li ng-repeat="test in tests">
      <a href="" ng-click="setActive(test)" ng-class="{blur: isActive(test)}">{{test.title}}</a>
    </li>      
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

To conditionally append a class based on a certain condition, you can utilize the ng-class directive. It is not recommended to use $index within an ng-repeat as it can cause issues when filters are applied. Instead, you can create two functions: isActive() to handle the ng-class directive and setActive() to designate the active item.

angular.module('app', [])

  .controller('Ctrl', function($scope) {
  
    var activeTest = {};
  
    $scope.tests = [{
      title: 'Test 1'
    }, {
      title: 'Test 2'
    }, {
      title: 'Test 3'
    }, {
      title: 'Test 4'
    }];
  
    $scope.setActive = function(test) {
      activeTest = test;
    };
  
    $scope.isActive = function(test) {
      return angular.equals(activeTest, test);
    };
  
  });

.blur {
  color: red;
}

<div ng-app="app" ng-controller="Ctrl">
  <ul>
    <li ng-repeat="test in tests">
      <a href="" ng-click="setActive(test)" ng-class="{blur: isActive(test)}">{{test.title}}</a>
    </li>      
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 3

Answer №2

To implement blur effect using AngularJS, you can utilize ng-class as shown below:

<li ng-repeat='item in items' >
    <a ng-class={blur:blurActive} href='' ng-click='selectItem($index, $event); blurActive=true'>{{item.name}}</a>
</li>

It's worth noting that there is no need to explicitly set blurActive to true within your function. Due to the unique scope created by ng-repeat for each repeated item, you can toggle the active state within the same ng-click event after executing your function. This approach keeps the functionality separate from the styling logic.

Answer 4

To implement blur effect using AngularJS, you can utilize ng-class as shown below:

<li ng-repeat='item in items' >
    <a ng-class={blur:blurActive} href='' ng-click='selectItem($index, $event); blurActive=true'>{{item.name}}</a>
</li>

It's worth noting that there is no need to explicitly set blurActive to true within your function. Due to the unique scope created by ng-repeat for each repeated item, you can toggle the active state within the same ng-click event after executing your function. This approach keeps the functionality separate from the styling logic.

Answer 5

Answer №3

Performing DOM manipulation within a controller is generally discouraged, a more angular way to accomplish this is by utilizing ng-class:-

   <li ng-repeat="test in tests">
       <a href="#" ng-click="pickTest($index, $event)" 
            ng-class="{'blur': opt.selectedIdx == $index}">{{test.title}}</a>
   </li>

and within your controller, simply:-

$scope.opt = {}; //Initialize a value in your controller

$scope.pickTest = function(index, $event) { 
     $event.preventDefault(); //If necessary
     $scope.opt.selectedIdx = index ; //Assign the current index here, you could also do this inline in the html, but it's usually better to have the logic in the controller
}

Plnkr

Answer 6

Performing DOM manipulation within a controller is generally discouraged, a more angular way to accomplish this is by utilizing ng-class:-

   <li ng-repeat="test in tests">
       <a href="#" ng-click="pickTest($index, $event)" 
            ng-class="{'blur': opt.selectedIdx == $index}">{{test.title}}</a>
   </li>

and within your controller, simply:-

$scope.opt = {}; //Initialize a value in your controller

$scope.pickTest = function(index, $event) { 
     $event.preventDefault(); //If necessary
     $scope.opt.selectedIdx = index ; //Assign the current index here, you could also do this inline in the html, but it's usually better to have the logic in the controller
}

Plnkr

Answer 7

Answer №4

In order to properly assign the class to the element that is currently clicked, you should first remove the class blur from all other elements that have this class.

$scope.selectElement = function(index, event) {
     $('.blur').removeClass('blur');
     $(event.target).addClass('blur');
};

Answer 8

In order to properly assign the class to the element that is currently clicked, you should first remove the class blur from all other elements that have this class.

$scope.selectElement = function(index, event) {
     $('.blur').removeClass('blur');
     $(event.target).addClass('blur');
};

Tips for managing click events in my class

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the reason behind the error "Uncaught SyntaxError: Malformed arrow function parameter list" when using "true && () => {}"?

Creating linear overlays in Tailwind CSS can be achieved by utilizing the `bg-gradient

Issues with Jquery Checkboxes Functionality

Filtering in AngularJS seems to only work in one direction

What is the reason that PHP has the ability to set Cookies but Local Storage does not?

Surprising outcomes encountered when playing audio with JavaScript

In React, ensure a component's state is preserved when the browser history changes

Extracting specific key-value pairs from JSON data

What is the best way to implement CSS properties on Material UI components?

I need guidance on how to successfully upload an image to Firebase storage with the Firebase Admin SDK

Consolidate HTML project into a unified HTML file

Converting Vue HTML to PDF without relying on html2canvas functionality

Combining and organizing two sets of objects in Javascript

Transform the text column into JSON format

The functionality of the onclick button input is not functioning properly in the Google

ng-if used to reverse the order of ng-repeat rendering

I'm curious, what is the largest size the Three.js render canvas can be?

What are some alternative solutions when functional component props, state, or store are not being updated within a function?

What causes the namespace to shift when utilizing npm for installing a library?

Error: Webpack encountering reference errors when handling multiple entry points