Angular does not automatically add a class

My Angular function looks like this:

$scope.show = function(el){

    if($scope.steps[el] == true){
        $scope.steps[el] = false;
    }
    else{
        $scope.steps = [];
        $scope.steps[el] = true;
    }
}

When I trigger it by clicking on this element:

<span class="" ng-click="show('getDate')">text</span>

A 'shown' class gets added to this div:

<div class="form-block steps second" ng-class="{shown : steps.getDate}">

However, when I call the function with this code,

$(document).on('click', "li", function() {
    $scope.show('getDate');
    console.log($scope.steps);
});

I get the following output in the console:

[getDate: true]

The LI tag is created dynamically using jquery.formstyler from a SELECT tag. Visit for more information.

Answer №1

It appears that the issue is arising because you made changes to your DOM outside of the "Angular" environment, causing Angular to be unaware of these modifications.

To resolve this, you can prompt Angular to digest by utilizing the $apply keyword.

For instance:

$(document).on('click', "li", function() {
    $scope.$apply(function () {
        $scope.show('getDate');
    });
    console.log($scope.steps);
});

Important Note: In most cases, it is not recommended to use jQuery instead of following the AngularJS conventions.

  • A special thanks to @Bhojendra Nepal for identifying the issue.

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

how to make a post request to an API using Next.js

I am attempting to make a request to the Exist API using next.js and the backend is in PHP. I am trying to send a post request (using Axios) with data and retrieve the response. How can I manage this API in my code? I have read that I need to include som ...

Troubleshooting: Missing MapState in Vuex4 for Vue3 within an MVC project

Within my MVC project, I have successfully integrated Vue3 with Vuex4. However, I have encountered an issue specifically related to the mapState function. Upon using the following import statements, an error is triggered: import Vue from 'vue'; ...

The issue I am facing is that whenever I use an AJAX POST request,

I encountered an issue where the ajax post method was unable to pass a parameter to the controller, as the controller parameter always appeared as Null. Index.schtml: I attempted to initiate a new view via a parameter by triggering an element in HTML and ...

How can you deactivate all form elements in HTML except for the Submit button?

Is there a method available to automatically deactivate all form elements except the submit button as soon as the form loads? This would entail pre-loading data from the backend onto a JSP page while restricting user access for editing. Users will only be ...

Navigating to the specific item that a directive is linked to

I am looking to develop a directive that can be applied to elements to adjust their maximum height to be equal to the height of the window minus the distance from the top of the element to the top of the window. I have attempted it in the following manner ...

Use JavaScript to swap out various HTML content in order to translate the page

I am currently facing a challenge with my multilingual WordPress website that utilizes ACF-Field. Unfortunately, WPML is not able to translate the field at the moment (2nd-level-support is looking into it). As a solution, I have been considering using Java ...

Establish the focus when the TinyMCE editor loads

After clicking the edit button, the tinymce text editor is displayed but there's an issue where the focus is not set on the first load of the editor. However, it works fine from the second load onwards. Here's what I have attempted: HTML <h ...

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

Reorganize external dependencies in the wwwroot directory using gulp

In my development setup using VS 2015, ASP.net vnext, Angular 2, Typescript, and gulp.js, I have successfully automated the process of moving my scripts/**/*.ts files to the wwwroot/app folder. Now, I am looking to extend this automation to include my libr ...

The phonegap page redirection is failing, as the 'location' property of the object does not function correctly

I'm attempting to implement a straightforward page redirection in PhoneGap using JavaScript. Within an iframe, I have the following code: window.parent.location("event_select.html"); Unfortunately, this approach is unsuccessful and results in the fo ...

Endless $digest Loop issue in angular hybrid app

I'm in the process of upgrading from AngularJS to Angular 2. Currently, I am utilizing SystemJS. However, when I introduce lodash, I encounter the issue of an Infinite $digest Loop. I have installed lodash via npm and also have lodash from bower. ...

Leveraging the power of AngularJS alongside jsPlumb to integrate jsPlumb functions directly within an AngularJS controller

Currently, I am developing a project that involves using jsPlumb for creating graphical element connections. My entire application is being built with AngularJS. I am wondering about the best approach to include code from another library into my controlle ...

In JavaScript, I am looking to duplicate an image and place it back at its original location after it has been moved from its initial position

I am working with 3 draggable images and my objective is to ensure that each image returns to its original position when moved. Ultimately, I want the user to be able to interact with multiple instances of images 1, 2, and 3 on the page, all of which are d ...

AngularJS - make it a practice to set a default parameter for every Resource

I have encountered a situation where the API I am working with requires a :groupId parameter in the URL for many operations. Is there a simple way to eliminate the need to pass $routeParams.groupId in every function call? var app = angular.module('pl ...

Creating a custom jQuery function that incorporates the `window.onbeforeunload` event handler

I am looking to enhance this code with a "window.onbeforeload" event that displays a message preventing the user from leaving the current page without adding the products to cart. The message should only appear when the quantity is greater than 0 and whil ...

Limiting the display of every item in Angular ngFor

I'm currently working with Angular and I have the following code in my component.html: <div class="card" *ngFor="let item of galleries;" (mouseenter)=" setBackground(item?.image?.fullpath)" (mouseover)="showCount ...

Transform an array of object's designated key values into a string that is separated by commas

Is there a way to convert specific key values of an object into a comma-separated string? I have been able to do this with arrays, but my current challenge is that my data is an array of objects. I want to convert each 'id' value into an array of ...

Using JavaScript code to dynamically display the value of the variable MyProperty in HTML

Are there any limitations when using this construction in JavaScript? In my codeBehind, there is a property with intricate logic in the get method. It calls other methods and despite debugging showing a good value, it returns an empty string. I'm curi ...

Creating visuals from written content

I am attempting to transform Y[0] into an image rather than text. Currently, it is only displayed as a plain text link and not as an image. <html> <head> <script type="text/javascript"> function modifyContent(){ var rows=document.g ...

What is the best way to customize image transparency using javascript?

Looking to create a webpage that shows an image for a specified duration before smoothly transitioning to another image that includes a clickable link. Wondering how to accomplish this using javascript? I am aware that it can be done with Flash, but it mu ...