The value of the $scope variable remains constant within the function

I am facing an issue with a scope variable that I passed to a function. Even though the variable is accessible inside the function, its value does not change when I try to modify it.

Below is my HTML code:

<div class="console_item" ng-class="dropdwns.assetshow==true?'showdrp':'hidedrp'" ng-
click="drpdwn(dropdwns.assetshow)">Asset Type</div>

And here is the code in my controller:

$scope.dropdwns={assetshow:false};
$scope.drpdwn=function(dat){
    if(dat==true)
    {
        dat=false;
    }
    else
    {
        dat=true;
    }
    console.log($scope.dropdwns);
}

I have tried using $apply, but it gives me an error. Can someone please assist me? Thank you.

javascriptangularjs

Answer №1

All you have to do is assign the correct value to the variable

$scope.dropdowns={isVisible:false};
$scope.toggleDropdown=function(data){
    $scope.dropdowns.isVisible = !data; // This line
    console.log($scope.dropdowns);
};

Answer №2

Make sure to pass the entire object to the function, not just its property:

    <div class="dropdown_item" ng-class="dropdowns.assetshow==true?'show':'hide'" ng-click="toggleDropdown(dropdowns)">Asset Type</div>

    $scope.toggleDropdown = function(data){
    if(data.assetshow == true)
    {
        data.assetshow = false;
    }
    else
    {
        data.assetshow = true;
    }

    //Simplified version: data.assetshow = !data.assetshow
    console.log($scope.dropdowns);
}

Answer №3

The quickest solution: 

 <div class="tab_selector" ng-class="{'open':dropdown.show, 'closed':!dropdown.show}" ng-click="dropdown.show = !dropdown.show">Select Tab</div>

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

Activate the submit button using jQuery

I have tested the code snippet that I shared on fiddle. I am looking to activate the save button by hitting the enter key, which will submit the form using ajax. The activation should occur when there is text content greater than 0 in the span. $(docum ...

javascriptjquery

Include scrollView on smaller screens based on conditions

While incorporating an overlay in my application, how can I integrate a ScrollView specifically for smaller devices? Initially, I am checking the width: const windowWidth = Dimensions.get("window").width; Subsequently, I am attempting to display the Scro ...

javascriptreact-native

The process of displaying only the month name as the title in Full Calendar

Is there a way to display the Full Calendar title with only the month name instead of "month name year name"? Here is my code attempt: $('#calendar').fullCalendar({ header: { left: 'prev', center: 'title' ...

javascriptjquery

EmberJS: Learning how to create a record with a belongsTo relationship

My issue involves using Posts and Comments to explain my problem. In my post_controller, I am trying to create a new record for a comment related to the current post. What is the recommended way to achieve this in Ember? The relationship between Post and ...

javascriptember.jsember-data

Imagine a scenario where clicking on an image causes it to be rotated or

Could use some assistance figuring out what's missing here. I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser w ...

javascripthtmlcss

Fetch the count of files in a directory using AJAX

I'm attempting to fetch the number of files in a folder and compare it with the maxfiles value. Within dropzone.js, there is a function that looks like this: Dropzone.prototype._updateMaxFilesReachedClass = function() { if ((this.options.maxF ...

javascriptphpjqueryajax

I'm having trouble understanding the distinction between this.query and this.query.find(). Can you explain the difference to me?

Currently, I am working on a MERN tutorial where I am developing a full E-commerce application. This is the class that handles querying and various other tasks. constructor(query, querystr) { this.query = query; this.querystr = querystr; con ...

javascriptnode.jsreactjsexpress

Animating the height of an element using CSS3 in AngularJS can be a hit or miss at times

I'm looking to animate an element, but I'm not sure of its actual height. That's why I'm utilizing a clever technique involving the use of max-height. The CSS involved is quite simple: .animate-enter-setup, .animate-leave-setup { tr ...

angularjscss-transitionscss-animations

Translate a jQuery ajax request utilizing jQuery().serialize into plain JavaScript

Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...

javascriptjqueryajax

What is the best way to utilize a variable in jQuery outside of a function?

I am attempting to utilize the .index method to determine the position of the image that is clicked on. I then need to use that number in another variable which must be external to the function. var index; $('.product img').click(function () ...

javascriptjquery

An effective method to showcase the HTML content retrieved by getElementsByClassName using JSON.parse()

Can someone help me modify this code so that it displays the value of favFood? It currently works with getElementById but not getElementsByClassName, and I want to use a class: server file - ProcesssingFileOnServer.php: <?php $myObj = new stdClass(); ...

javascriptphphtmljson

Endless Loop Issue with Google Maps API Integration in NextJS-React

Currently struggling to troubleshoot an infinite loop issue in my React function component map. I've spent a considerable amount of time analyzing the code and suspect that it might be related to the useEffects, but I'm unable to resolve it. Atta ...

javascriptreactjsnext.js

Utilizing ES6, accessing the first element of an array of objects

How can I access the values of the first or a specific object in an array based on an index using ES6? arrayOne =[ { child: [ {e1: 'ABCD', e2: 'BCDF'}, {e1: '1234', e2: '5689'}, {e1: 'QAZ ...

javascriptarraystypescriptecmascript-6

Function triggered twice upon checkbox being selected

Below is the code snippet I am using: $("#cc1").unbind('click').click(function(e) { //somefunction }); This code works perfectly fine for executing a function after clicking the cc1 button. However, when I use the following code: $("#cc1" ...

javascriptjquerybuttoncheckbox

What are some ways to utilize the $compile function in AngularJS

I attempted to include a template html using an angular controller. After researching how to utilize $compile, I implemented it but unfortunately it failed: CustomersCtrl.$inject = ['$scope', '$http', '$location', '$mo ...

angularjsangularjs-controller

If you're not utilizing v-model.lazy, Vue3 Cleave js may encounter functionality issues

I am currently experimenting with cleavejs to format the thousand separator in my input numbers. I've noticed a strange behavior where if I input 1000.123, it displays as 1,000.12 which is the correct format. However, the v-model value remains as 1000 ...

javascripttypescriptvuejs3cleave

Tips for updating values in a nested array within JSON

I am working with the following .json file and my goal is to update the values of "down" and "up" based on user input. "android": { "appium:autoAcceptAlerts": true, "appium:automationName": "UiAutomator2", ...

javascriptnode.jsjson

What is the reason for jQuery returning an integer instead of an object?

Currently, I am attempting to preselect an option within a <select> tag based on a variable. However, while using jQuery to select the elements and iterating through them with .each(), it appears to be returning integers instead of objects, making .v ...

javascriptjquery

Is JSONP functioning properly in Chrome but not in Firefox or Internet Explorer?

I'm currently in the process of developing a mobile site and I've opted to use JSONP requests via jQuery to communicate with the data server in order to retrieve information for display on the mobile site. The advice given to me was to avoid usin ...

javascriptjqueryajaxjsonpcors

Can a dynamic field name be incorporated into a JavaScript Object?

My goal is to dynamically add a field name and update the value based on that. In my situation, the eventType can have 4 types: delivery, send, open, click. However, when I implement this code, I am only getting the eventType as a string. const event = J ...

javascriptnode.jsgoogle-cloud-firestore