If the condition is true, apply a class with ng-class when ng-click is triggered

I am facing a situation similar to toggling where I am adding the class col-xs-6 to divide the page into two views. Initially, when I click, I set a variable value as true and in ng-class, I check for a condition to append the col-xs-6 class.

Below is the HTML code that I have experimented with:

<div ng-class="{'col-xs-6': isClick}">
<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="isClick=!isClick" data-toggle="collapse" data-target="{{'#'+toggle}}">{{candidateInfo.name}} resume</a></div>
        </div>
    </div>
</div>


<div id="{{toggle}}" class="collapse" ng-class="{'col-xs-6': isClick}">
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.

I seem to be stuck and not sure where I am making a mistake.

Any help or guidance would be highly appreciated.

javascriptangularjs

Answer №1

@JohnSmith123 ,I wanted to share with you my controller code snippet 

angular.module('jobPortalApp')
.controller('interviewCandidateCtrl', function($scope, $state, iterateArray, getCandidateInterviewListService) {
    getCandidateInterviewListService.fnGetCandidateDetails(localStorage.getItem('username')).then(function(response) {
        $scope.candidateInfo = response;

    });
});

Answer №2

If you want to control it, the following code can be used

<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<span class="base-class" ng-class="myVar">Sample Text</span>

In the code above, when you click for the first time, set myVar as 'col-xs-6', and then clear it on toggle.

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

Is there a way to dynamically update the text of $ionicPopup's subTitle in Ionic?

I am currently attempting to modify both the value and style of the subText attribute linked to an $ionicPopup within my app. Despite searching extensively, I have been unable to uncover a viable method for accomplishing this task. Is there a way to achi ...

javascriptangularjsionic-frameworkionic-popup

unable to utilize references in React

import React, { Component } from "react"; class Learning extends Component { firstName = React.createRef(); handleSubmit = event => { event.preventDefault(); console.log(this.firstName.current.value); } ...

javascriptreactjs

Continuously calling setState within the useEffect hooks causes an infinite loop

After extensive research and reading various articles on the topic, I am still facing the issue of infinite loops with useEffect and useState. One article that caught my attention was this one. Prior to reading the article, my useState function inside use ...

javascriptreactjs

The `Target closed` error in Playwright Library is triggered solely by the closing of either the `context` or `browser`

The code snippet below showcases a Node.js script that leverages the Playwright Library for browser automation (not Playwright Test) to extract data from a local website and display the results in the terminal. The challenge arises when the script encounte ...

javascriptasync-awaitplaywright

Choose between creating an observable pipe within a function or storing it in a variable

Currently, I have a functional code snippet that leverages the Angular service to create an Observable pipeline. This pipeline utilizes operators like mergeMap, filter, map, and shareReplay(1) to manage user authentication and fetch the onboarding status f ...

javascriptangularfirebaseclassrxjs

Challenges encountered in d3.js when parsing through data sets

For the past two days, I have been struggling to solve this error and I'm at a loss. Every time I try to add data to the visualization, I encounter the following error: Uncaught TypeError: Cannot read property 'length' of undefined It seem ...

javascriptjqueryd3.jssvg

What value does a variable have by default when assigned to the ko.observable() function?

I am in the process of learning KnockoutJS and I have implemented code for folder navigation in a webmail client. In the view code, there is a comparison being made to check if the reference variable $data and $root.chosenFolderId() point to the same memor ...

javascriptjqueryhtmlcssknockout.js

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

javascriptjqueryhtmlcss

What is the best way to utilize ng-touch with checkboxes?

Is anyone else experiencing issues with form elements such as checkboxes and radio buttons not working properly with touch libraries like ng-touch? If so, are there any workarounds or solutions available? ...

angularjsangular-touch

What makes .html effective while innerHTML or appendChild do not have the same impact?

Currently, I am facing a challenge where I am attempting to incorporate an ajax response into a div that contains HTML code involving tables, forms, and more. After testing in Firefox, the innerHTML method worked flawlessly. However, Internet Explorer pre ...

javascriptjqueryajaxinternet-explorer

Potential issue of excessive memory usage in node.js when running an Express server with PM2

Currently, I am focusing on a specific aspect of a suite of services designed to work in conjunction with an app/platform. The particular area that requires assistance is related to a vanilla express server used to provide our client app (a react app). We ...

javascriptnode.jsmemoryexpressmemory-leaks

Record every function within the array prototype

Exploring methods that can be accessed on an array object: > console.log(Array.prototype) [] undefined > console.log(Array.prototype.push) [Function: push] Is there a way to view or log all properties/methods accessible on an object's prototyp ...

javascriptarraysobjectiterationjavascript-objects

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

javascripthtmlcssangular

Error message HMR Webpack was found to be invalid

When using Webpack, I keep encountering the following error message: Invalid HMR message, along with a lengthy JSON string. Unfortunately, I couldn't find any helpful resources to assist me in debugging this issue. Do you have any suggestions? I&apo ...

javascriptnode.jsnpmwebpackwebpack-hmr

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe. I believe adding ...

javascriptiframecrossrider

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

javascriptjquerycsssticky-footer

Tips for creating a dynamic menu item that stands out with a highlighted style

I would like to add a colored square to highlight the active menu item. .main-menu ul { padding: 0; margin: 0; text-align: center; } .main-menu li { list-style-type: none; display: inline-block; padding: 40px 0; } .main-menu a { font-fam ...

javascriptjqueryhtmlcss

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

javascriptjqueryhtmlcss

React array fails to update upon modification

Hey there! I've created a component that takes an array of strings, combines them, and then renders a typing animation by wrapping each character in a span tag with toggling opacity from 0 to 1. I noticed an issue when switching the order of displaye ...

javascriptreactjstypescriptnext.js

Is there a way to retrieve the value of an HTML variable using Selenium?

Seeking assistance in determining the progress value of a video using Selenium. I understand that I need to utilize JavaScript executor, but have been unsuccessful in finding a solution so far. The element in question is: <div aria-label="scrub bar" a ...

javascriptjavahtmlselenium