Learn how to utilize ng-class to assign an ID selector to HTML elements

In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements.

<i ng-show="ctrl.data.length > 1"
   ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
              'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>

Answer №1

For the ID value to be dynamically generated, enclose it within {{}} so Angular can process the value.

<i ng-show="ctrl.data.length > 1" id="{{ctrl.isOpen ? 'chevron-up' : 'chevron-down'}}"
   ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen,
          'glyphicon glyphicon-chevron-up': ctrl.isOpen}">
</i>

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

Tips for utilizing Selenium to acquire links from a webpage

Is it possible to retrieve the link location of a web element in Selenium? While we can easily obtain the text from a web element and use getAttribute("href") method to get the location of a hyperlink, my need is to extract all the links present. For insta ...

Angular Scope Variables Fail to Update

Being fairly new to Angular, I had an idea that should work: This is the HTML code: <div style="float:left;width:26%;height:96%;margin:2% 0 2% 0;background-color:#efefef;padding:0 2% 0 2%;" ng-app="fcApp" ng-controller="fcCtrl"> <span>Fi ...

How to design a bell curve using CSS styling

Exploring CSS shape design, I am aiming to create a classic bell shape reminiscent of the holiday season. While the top and bottom balls are not essential to my design, here is the basic outline I'm striving for: This is what I have been able to achi ...

Verify the presence of plain ASCII text

I need to verify if the file uploaded is in ascii plain text format. Can you suggest a method? $("#my_file").change(function(){ //alert if file is not ascii plain text }); <input type="file" name="my_file" id="my_file" /> ...

Safari and mobile browsers do not support animation functionality

My animation works flawlessly in Chrome, but it's not functioning properly on Safari. Quite odd, right? Here is the code snippet: <header> <div class="ripple-1"></div> <div class="ripple-2"></div> ...

it will still function properly regardless of the width being set to zero

Is anyone able to explain the strange phenomenon I am experiencing with this code snippet? In this particular example, I have set the width of selector h3 to 0. However, when viewing it in IE 9 using F12 development tools, I can see that the width is indee ...

What is the best way to align flexbox to the left?

I'm having trouble aligning the FileCard component to the start of the container. I attempted using flex-start in my styling, but the FileCards are still centered. This is the current code snippet: <div v-if="posts" ...

When hovering over the main menu, the submenu appears hidden behind it

I am struggling with setting up a dropdown submenu on my website that uses a responsive Joomla template. The submenu always appears behind the main menu and slider, despite trying z-index and relative positioning. Can anyone help me figure out what I' ...

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

Validating Age Using jQuery UI Datepicker

Creating a dating platform for users over the age of 18, I am utilizing jQuery UI datepicker. To ensure only individuals above the age of 18 can register, I need the YEAR section to display 18 years earlier (1997) instead of the current year (2016). This w ...

Using Angular Ionic 3 to apply the disabled attribute

I have a situation in my main.ts where I need to disable a textarea in the HTML if an object is initialized. I've attempted various methods like: ng-attr-disabled="!myObj"; ng-attr-disabled="{myObj!= null}"; and also directly using ng-disabled. I e ...

Creating a new Angular project may encounter issues with extracting cached files

I am facing an issue while trying to create a new Angular2 Application using angular-cli. When running ng new, it fails during the npm step with the message: Installing packages for tooling via npm Installing packages for tooling via npm typings ERR! mes ...

Issues encountered with the delete function using distinct row identification format

I am encountering an issue with variable value in input field. To provide some context, I have client information stored in a MySQL database. Using PHP, I retrieve this data and display it in a table. Currently, I am working on implementing a delete optio ...

Is there a way to change the input type=file value?

What is the best method for customizing a file upload using input type="file" in HTML? Here is an example of what I am trying to achieve: <form enctype="multipart/form-data" action="xmlupload" method="post" name="form1" id="form1"> <input type ...

Items outside the container element

I recently noticed an issue with my website, which is built using Bootstrap. The problem arises when users scroll down the page and encounter the fixed navigation menu. It appears that the menu items and logo are no longer contained within the designated ...

Converting units to rem dynamically in CSS: a comprehensive guide

Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues. I have set the root font-size as 23px The current font-size is 16px The expected result should be 16 / 23 => 0.695rem Question: I am looking for ...

establishing the default value as p-multiselect

Here is the code snippet I am currently working on: export class LkBoardStatus { id : number = 0; descr : string = ''; } In the component.ts file, I have defined the following: //... lkBoardStatusList: LkBoardStatus[] = []; selectedStat ...

Border Effect Resembling Windows Tiles

When you hover your mouse over a tile in Windows, a cool effect happens: Hovering outside the tile, but within the container area: Hovering inside a tile: Hovering outside a tile at its mid point, causing opposite sides to light up: I'm lookin ...

The quantity of elements stays constant even after adding to them using Javascript

I have implemented a notes list feature that allows users to add notes using an input field. Beneath the notes list ul, there is a message showing the total number of notes: $('li').length. However, I encountered an issue where the count of not ...