Unable to apply ng-class when condition is met after ng-click

I am currently experiencing an issue with ng-class. When I click, I pass a variable and then check if it is true in ng-class. If it is indeed true, I append the "col-xs-6" class.

Here is what I have attempted:

<div ng-class="{'col-xs-6': myVar}">
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails track by $index">
    <div class="panel-heading header-background">>
        <div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" class="stop-watch"></div>
        <div class="row">
            <div class="col-xs-2">><a style="cursor:pointer" class="pull-right">>{{candidateInfo.name}}</a></div>>
            <div class="col-xs-offset-9">><a style="cursor:pointer" ng-click="myVar" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div><
        </div><
    </div><
</div><


<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': myVar}">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Unfortunately, this approach is not working as expected.

I am unsure where I might be making a mistake.

I even tried it on Plunker here: demo

Any guidance or assistance you can provide would be greatly appreciated.

javascriptangularjs

Answer №1

If you are currently developing with Angular 2.0 and coding for Angular 1.5, it's time to update your library to Angular 1.

Additionally, make sure that your 'myvar' variable is properly defined within the scope to prevent it from always being falsy.

Answer №2

you must structure it as shown below.

https://plnkr.co/edit/Bx9s88ASSxGkgJDj0U0L?p=preview

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

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4a9e7f7f7c4b7aab7aab2">[email protected]</a>" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<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="96f7f8f1e3faf7e4b8fce5d6a7b8a2b8ee">[email protected]</a>" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

<div >
<div ng-class="{'col-md-6': myVar == true}">
  <div class="panel panel-default">
    <div class="panel-heading header-background">

      <div class="row">
        <div class="col-xs-2"><a style="cursor:pointer" class="pull-right">John</a></div>
        <div class="col-xs-offset-9"><a style="cursor:pointer" ng-click="myVar=true" data-toggle="collapse" data-target="{{'#'+toggle}}">John resume</a></div>
      </div>
    </div>
  </div>
  <div id="{{toggle}}"  ng-class="{'col-xs-6': myVar == true}">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
</div>


</body>

</html>

and in script 

 $scope.toggle = "accor"
         $scope.myvar = false;

Note : i have chnage the class from col-xs-6 to col-md-6 , since i am working on a laptop.If you are checking this on mobile col-xs-6 will work similar way.

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

Emulate a Click Using Pure JavaScript

I am looking to add a click event to my custom dropdown, which replaces a SELECT element. The purpose of this click event is to trigger the corresponding OPTION item when an LI element is clicked. It seems like Woocommerce uses some JavaScript or PHP func ...

javascriptwordpresswoocommerce

Dimensions of HTML Container on Google Website

I'm attempting to incorporate a collapsible table using HTML Box in a Google site. The code for the collapsible table can be found at http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table. Here is the code: <html> <head> ...

javascripthtmlcssgoogle-sites

What is the method to retrieve a randomly generated class from an id?

Is there a way to target elements that have the class "my_class" within the element with the id of "info_id"? It's important to note that these elements may also have another class, which I'm not interested in selecting. <div id="info_id"> ...

javascriptjquery

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

I've been attempting to utilize the jquery table sorter plugin, but I keep encountering an error when trying to sort the table. The error message I'm receiving is: cannot read property '1' of undefined This is the HTML code I have: ...

javascriptjquery

Utilizing Angular JS to Manage Controller Events

I am currently working on an application that requires saving a large amount of data in cascade, similar to a typical master-detail view. Within this view, there is a "Save All" Button which saves each row in an iteration. This process triggers jQuery cus ...

javascriptjqueryangularjsjquery-events

Obtain picture from firebase utilizing react Js

I have attempted multiple methods to download images from Firebase, but the download URL is not functioning as expected. Instead of downloading the image directly, it opens in a new tab. The function used in Firebase: export async function addMedia(locati ...

javascriptreactjsfirebasereact-nativefirebase-storage

Another method to verify an input using HTML5 regex and JavaScript

When working with vanilla JavaScript to check an HTML input against a regex pattern, things can get tricky. I find myself going back to the parent element to validate the input, and while it works, it's not as elegant as I would like it to be. Here i ...

javascriptarraysforms

Retrieve the ActiveTabIndex value from an Ajax TabContainer using Javascript

Is there a way to retrieve the ActiveTabIndex from TabContainer when a tab is selected by the user? I've attempted the following approach without success. <script type="text/javascript"> function GetActiveTabIndex() { var tc = docum ...

javascriptasp.netajaxweb-applications

socket.io establishes several sockets for each connection

At times, when the server is experiencing some load, connecting to the page may result in multiple sockets being created. If there is significant lag, the connection may never be established while additional sockets are generated every second indefinitely. ...

javascriptnode.jssocket.io

Personalizing the React Bootstrap date picker

I am currently working on customizing the react-bootstrap-daterangepicker to achieve a specific look: My goal is to have distinct background colors for when dates are selected within a range and when the user is hovering over dates to make a selection. I ...

javascripthtmlcssreactjsreact-bootstrap

Implement a procedure for printing a page once the columnize operation has been completed

Hello, I have run into a problem that I need help with. Currently, I am trying to print a page after the function "columnize" has finished its task. However, the print function is executing before the columnize function completes. How can I ensure that t ...

javascriptjqueryasp.netprinting

Creating a monorepo project in JavaScript that mimics the structure of Visual Studio projects

When working on a typical .NET Core project (with Visual Studio 2019), the structure typically looks like this: Example/ |-- Example.Common/ | |-- FileExample1.cs | |-- FileExample2.cs | `-- Example.Common.csproj |-- Example.WebAPI/ | |-- Control ...

javascriptnode.jsnpmyarnpkgpackage.json

Adding a new item automatically- Angular UI inquiry

I'm in the process of implementing a 'new stories' feature on a website where authors can contribute their work. The current function I have allows for the creation and addition of stories to an author's profile, but it doesn't aut ...

angularjs

Using AJAX to submit a form and retrieve response data in Javascript

After successfully getting everything to post correctly, I encountered a problem with this script. It keeps loading the content into a new page. Could it be related to the way my php file returns it using "echo(json_encode($return_receipt));"? <s ...

javascriptphphtmlajaxjson

Error encountered: Unable to locate module 'psl'

I'm encountering an issue when trying to execute a pre-existing project. The error message I keep receiving can be viewed in the following error logs image Whenever I attempt to run "npm i", this error arises and I would greatly appreciate it if some ...

javascripttypescriptnpm

Issue with Ajax load function not functioning properly on Internet Explorer 8

My ajax load function is working in Chrome, Safari, Opera, and Firefox but it's not working in Internet Explorer 8. (using jQuery version "jquery-1.11.2") This is my JavaScript code: function solFrame(islem, sayfa) { if (sayfa == '') { ...

javascriptphpjqueryajaxinternet-explorer-8

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

javascriptjqueryhtmlcssjquery-select2

Get the docx file as a blob

When sending a docx file from the backend using Express, the code looks like this: module.exports = (req, res) => { res.status(200).sendFile(__dirname+"/output.docx") } To download and save the file as a blob in Angular, the following code snippet i ...

javascriptangularjsexpress

How can I send extra information along with my Ajax request in jQuery UI Autocomplete?

I currently have two jQuery UI Autocomplete widgets set up. The first autocomplete allows the user to enter a client's name, narrowing down options until the correct client is selected. A callback function then takes the ID of the chosen client and st ...

javascriptjqueryajaxjquery-uiautocomplete

Please ensure that the data has fully loaded before initializing the component

I am currently working with Angular 1.5 and have a scenario where I have one component nested within another component, as shown below. The issue I am facing is that the data variable is not resolved by the time Angular triggers the component-child, result ...

angularjs