How come ng-class doesn't apply to a specific class name?

I recently wrote the following code:

 <style>
    .dotted {
         border:dotted;
     }
 </style>

....

 <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p>

My intention was to have the paragraph element enclosed within a dotted border line. However, it does not seem to be working as expected. Upon reviewing the Angular documentation (https://docs.angularjs.org/api/ng/directive/ngClass), I came across the following information:

If the expression evaluates to a string, the string should be one or more space-delimited class names.

From this, I gather that ng-class is meant to contain a class name defined within the <style> tag itself. So, where could I possibly be going wrong?

Answer №1

ng-class directive evaluates its value against the scope of the DOM it is bound to. In this case, dotted does not get evaluated with the scope and ends up without a value. Therefore, you need to provide it as 'dotted' (as a string).

ng-class="'dotted'"

If your class is static, you should simply use class="dotted".

Answer №2

When using ng-class, make sure to provide an evaluation like the following:

ng-class="{class: booleanVar}"

If your class name includes a hyphen, be sure to enclose it in quotes like so:

ng-class="{'my-class-name': someVar === someThing}"

You can also use a function in ng-class like this:

ng-class="{'my-class-name': someFuncReturningTruthyValue()}"

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

What is causing the Firebase emulator to crash when I run my Express code?

This project is utilizing express.js along with firebase. Whenever attempting to access a different file containing routes, it results in failure. Instead of successful emulation, an error is thrown when running this code: const functions = require(" ...

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

Javascript issue: opening mail client causes page to lose focus

Looking for a solution! I'm dealing with an iPad app that runs html5 pages... one specific page requires an email to be sent which triggers the Mail program using this code var mailLink = 'mailto:' + recipientEmail +'?subject=PDFs ...

ESLint error caught off guard by function expression in customized MUI Snackbar Component with Alert

Struggling to create a personalized MUI Snackbar using the MUI Alert example from the official Documentation, but facing ESlint errors: error Unexpected function expression prefer-arrow-callback error Prop spreading is forbidden react/jsx-props-no-s ...

Manipulate a JSON object with JavaScript

Struggling to find a solution on my own. In my hidden field, I have some JSON data stored. To retrieve this data, I'm using the following syntax: $(document).ready(function() { var data = $("#result").text(); var j = JSON.parse(data); j.my_item.to ...

Is the CSS and jQuery plugin combination blocking the AJAX call or event listener from functioning properly?

After finally getting superfish to work, I encountered a problem where an ajax call would not trigger due to the event listener being prevented. By commenting out the plugin initialization, the event fired but with incorrect data. Any insights on why this ...

Getting JSON data from an API using $.ajax

Currently, I am working on creating a random quote machine. To start off, I wrote the following HTML code to outline the necessary elements: <div id="quoteDisplay"> <h1 id="quote">Quote</h1> <h2 id="author">- Author</h2> ...

Encountering an issue in Angular 8 where a class is not being added after the page loads, resulting in an

Looking to dynamically add a class to a div element using Angular? I have a condition isTrue, and am utilizing the angular function ngAfterViewInit() to add the class hideOnLoad after the page loads when isTrue becomes true. Instead of traditional javascri ...

What is the best method to divide a string, enclose it within a span tag, and generate fresh code using jQuery?

Is there a way to separate multiple links, enclose them in a span tag, and then iterate through them to display them back within the a tag? I have managed to split all the dates into the dateArr array, but I need help looping through them to output each on ...

Using Vue.js to submit a form in Laravel and redirecting with a flash message

I am facing an issue where I have two components named Index and Create, loaded from separate blade files. The challenge is passing a flash message as a prop between these components due to their file separation. How can I redirect after submitting a form ...

I am looking to create a split div with a diagonal line running through

Is there a way I can create this Mockup using html5 and css3, but also add diagonal lines to divide the div? Any suggestions on how to achieve this? ...

The dropdown menu is unable to open directly below the main menu item

How can I make the submenu open to the left when hovering over a menu point, instead of directly under it? I have tried adjusting the position attributes but haven't found the right solution yet. The closest I got was by changing the display property ...

"Utilizing Jquery for interactive menu functionality - delivering the requested JSON

I have successfully implemented a dynamic menu using jQuery that parses a JSON response file to create the menu. However, instead of having the menu items link to URLs, I want them to retrieve and parse JSON data from those URLs. Despite my efforts, the me ...

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

Overlapping input elements occur when Twitter bootstrap prepended input elements are positioned side by side

I ran into an issue while attempting to place two input elements side by side, with a prefixed item on the first input, using display:table styles. Unfortunately, the second input element ends up overlapping the first. I tried using box-sizing: border-box ...

Variety of background colors for different categories

Is there a way to showcase my categories with different background colors using a custom post type? I want to link the slug name from my taxonomy to serve as the class attribute for a span element and style it with CSS. However, I am encountering issues wi ...

AngularJS Global Variables: Harnessing the Power of Global Variables

Recently, I encountered an issue with initializing a variable in a controller's scope. The problem arose when the variable was altered by another controller upon user login. This particular variable plays a crucial role in managing aspects like the na ...

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

I keep getting an error saying "wallet.connect() is not a function," even though it was working perfectly just a few

`` I'm currently working on the FCC solidity course and I've reached the 7:45 mark. Everything was running smoothly until I encrypted the RPC url, private key, and password. Now, when trying to connect my wallet variable to the provider variable ...

Unexpected null value returned upon form submission with Mongoose and ExpressJS

I am encountering an issue with sending data from a basic HTML form to MongoDB using Express. When I try to post it, I am getting null as the result. The Schema I used is: commentname: String. Below is the snippet of the HTML code: <form id="form ...