Is it possible to activate ng-class following an ng-click event?

Here is the element in question:

<a href="" ng-click="project.hasPhotos? removeFromProject(project, $index, currentPhoto) : addToProject($index, currentPhoto)" ng-class="{'selected-project': (belongsPhotoToProject(project, $index, currentPhoto) || project.hasPhotos)}">{{ project.label }}</a>

The purpose of the ng-class directive is as follows: if the photo is associated with the project and the function belongsPhotoToProject returns true, the class selected-project should be added. However, after clicking and executing the removeFromProject function, which changes the output of belongsPhotoToProject, the class is not removed as expected.

Therefore, I am left with a few questions: How does the ng-click event behave after the initial page load? Is it possible to manually trigger the ng-click event again when clicked?

javascriptangularjs

Answer №1

It seems like the solution you provided should work just as you described. To see it in action, check out this plnkr:

http://plnkr.co/edit/V4R0EUwKK5TeH5wn7Y5N?p=preview

Have you encountered any errors in your browser while testing this?

Javascript:

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.project = {
    hasPhotos: true,
    label: "My Test Project"
  };

  $scope.removeFromProject = function(project, $index, currentPhoto) {
    $scope.project.hasPhotos = false;
  };

  $scope.addToProject = function($index, currentPhoto) {
    $scope.project.hasPhotos = true;
  };

  $scope.belongsPhotoToProject = function(project, $index, currentPhoto) {
    return $scope.project.hasPhotos;
  };
});

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b7b8b1a3bab7a4f8bca596e7f8e4f8ae">[email protected]</a>" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <a href="" ng-click="project.hasPhotos? removeFromProject(project, $index, currentPhoto) : addToProject($index, currentPhoto)" ng-class="{'selected-project': (belongsPhotoToProject(project, $index, currentPhoto) || project.hasPhotos)}">{{ project.label }}</a>
  </body>

</html>

CSS: 

.selected-project {
  background-color: #ccf;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a Node.js program using the command line without having to type out the word 'node'

I am currently working on a Node.js package that includes a command-line utility. Right now, alacon.js is situated in the root of the package. To execute this utility, I have to use the word node followed by the utility's name, like so: node alacon ...

javascriptnode.jscommand-linenpm

What is the best way to organize AngularJS Routes into a separate file?

Is there anyone out there who has experience with splitting routes from the main app config function? My list of routes is becoming too extensive, and I am interested in moving them to a separate file and then loading them into the main config. Although ...

angularjsangular-ui-router

Tips for converting JSON information on a website and inserting it into a designated division?

I've recently delved into front-end development, searching for solutions and hints without much success. I'm currently in the process of building my first website, specifically a "find recipes" website. Lacking knowledge of API calls, I created a ...

javascriptjqueryhtmljsonajax

Create a never-ending jQuery script that is simple and straightforward

My WordPress website features an accordion element that usually functions well by toggling classes when tabs are clicked. However, there is one issue where clicking on a tab does not automatically close other opened tabs. To address this, I added the follo ...

javascriptjquery

Issue encountered when upgrading from Angular 4 to Angular 5: Module '@angular/router' is not found

I recently made the switch from angular 2 to angular 5. However, after the upgrade, I encountered some errors in my ts file. Should I remove @angular/core and @angular/router in angular 5? Here is a snippet of my package.json post-upgrade. Below are the de ...

javascriptangularnpmangular2-routingangular5

Exploration of how modals are constantly refreshing with each modal switch

Whenever a new modal pops up asking users questions on a car estimate site, the entire component and its child components re-render. Although this behavior is acceptable, the main issue arises when submitting the problems modal, causing the complete comp ...

javascriptreactjsbootstrap-modalbootstrap-5

What is the best way to handle JSON data in vue.js?

I am facing an issue with vue.js. I want to create a settings page on the server program that has XML data. I believe it can be achieved by following these steps : server | parse XML to JSON client | get JSON and read JSON client | edit JSON client | ...

javascriptjsonxmlvue.js

"Provider not recognized: aProvider <- a" How can I locate the initial provider?

While loading the minified version of my AngularJS application, an error appeared in the console: Unknown provider: aProvider <- a This issue is due to variable name mangling. The unminified version works properly, but I prefer to use variable name ma ...

angularjsgoogle-chromeuglifyjssource-maps

Webpack2 now transforms sass/scss files into JavaScript rather than CSS during compilation

I've created a webpack script to compile all .scss files into one css file. I decided to use webpack instead of gulp or grunt for simplicity, as it can be configured in a single file. However, I am encountering an issue where scss files are being com ...

javascriptcsswebpacksass

How can we show a div element when hovering over another element using css-in-js?

Is there a way to use material ui withStyles component in order to show information only on hover for a specific div? ...

javascriptreactjsmaterial-uicss-in-js

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this wo ...

javascriptjqueryhtmlcss

PHP code for printing a JavaScript string containing a single quote

I'm encountering an issue with a script generated by PHP. When there is a single quote in the description, it throws a JavaScript error and considers the string terminated prematurely. print "<script type=\"text/javascript\">\n ...

phpjavascriptescaping

Whenever I attempt to adjust a CSS value to a negative number, the jquery functionality suddenly ceases to operate

Here is the code that I'm currently using: $(document).ready(function() { $("h1").delay(1000).animate({ top: (0 px), opacity: 1, }, 700, function() {}); }); I'd like to modify it to this: $(document).ready(function() { ...

javascriptjqueryhtmlcss

Ant Design radio group buttons are currently dysfunctional

I'm having some trouble with radio group buttons. Can anyone assist me with this issue? (your help is greatly appreciated) Current Problem: Radio Group buttons are unclickable. Not sure where the issue lies! Technologies Used: React hooks, styled-co ...

javascriptreactjsfrontendreact-hooksantd

I would like for this message to appear periodically following the initial execution

I have developed a unique welcome feature using HTML and CSS that I would like to showcase intermittently. --------------------------- My Desired Outcome --------------------------- Initially, this feature should be triggered once (when a user first acce ...

javascripthtmlcssanimation

Error: guild is not defined | discord.js

Having trouble with a ReferenceError that says guild is not defined? I recently encountered a similar issue with members but managed to fix it by adding a constant. As someone new to javascript and node.js, I could use some assistance. I've even tried ...

javascriptnode.jsdiscord.js

There is no information available at this time

Currently, I am delving into Angular and am keen on creating a web application that consumes a Restful Web service. The setup of my page is as follows: <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html ng-app="Tri ...

javascriptangularjsrest

Protractor Error: Internet Explorer Launch Error Due to Inconsistent Protected Mode Settings Across Zones

I need help troubleshooting my protractor launch. Here is the code snippet I am currently using: conf.js containing the following: // Sample configuration file. exports.config = { // Address of running selenium server. seleniumAddress: 'http://lo ...

angularjsseleniumprotractorgulp-protractor

What is the most effective way to stop zooming when focusing on form fields on iOS or similar devices when using font sizes of 16px or lower?

It appears that many proposed solutions involve changing the text to 16px or using JavaScript to determine if the phone is an iPhone. However, altering the style may not be the most practical solution and checking for specific devices like iPhones could ...

javascriptioscssinputzooming

Utilizing a Variety of Animations with D3 (version 5)

I am currently working on an animation that involves fading out text in a list and collapsing the list when the heading is clicked. However, I am facing a few issues with the code provided in this example. d3.select('.panel-heading') .on(&apos ...

javascriptanimationd3.jstransition