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

Calculating the dot product of two arrays using JavaScript

let array1 = [2,4,6] let array2 = [3,3,3] let result = dotProduct(array1,array2) // should return 36 Can you suggest a streamlined approach to creating the dotProduct function without relying on external libraries? ...

The module 'angular' appears to be missing within the Angular 2 project

Currently, I am utilizing angular-cli and typescript in an attempt to downgrade an angular2 component for it to function within an angular 1.5 project. However, the module is not being recognized. What could be causing this issue? // Angular 1 Vendo ...

Invoking functions from controllers to mongoose schema module in Node.js

Greetings everyone, I am fairly new to working with Node.js so let me share my current dilemma. I have set up a mongoose schema for handling comments in the following structure: const mongoose = require("mongoose"); const Schema = mongoose.Schema; const ...

attaching the model to chosen values rather than defining the chosen item

This is the coding I am currently using which is functioning correctly: <div class="col-md-12"> <div class="button-group"> <button type="button" class="btn btn-default btn-block btn-sm dropdown-toggle" data-toggle="dropdown"> ...

Looking for tags similar to stackoverflow?

Is there a way to create a search box similar to the one in Tags where tag names are displayed immediately upon entering without pressing enter key? Could anyone provide me with a script or tutorial on how to achieve this? Is it done using JavaScript or j ...

The duration of recorded audio in JavaScript is unclear

I managed to successfully create a structure for recording and downloading audio files. However, I'm facing an issue where the final downloaded file has an unknown duration. Is there any way to solve this problem?? Here is my Typescript code snippet: ...

Repeated URL causes Node to redirect

I am currently working on a project that involves redirecting users if they enter a specific URL, especially for redirecting from a Heroku domain. During my testing phase on localhost, I noticed that the redirect URL keeps getting repeated: http://localh ...

What causes the _.sum() function in lodash to not work with objects in Vuejs?

I've encountered an issue where using Vuejs and Lodash in conjunction with a computed property that calculates the sum of a property in a collection results in unexpected behavior. Instead of summing the values, it seems to concatenate the string [obj ...

Heroku is showing an Error R10 (Boot timeout) message, indicating that the web process was unable to bind to the designated $PORT within one minute of launching

Encountering an error while trying to deploy my first node project on Heroku. Here is the error message: 2020-09-29T04:24:09.365962+00:00 app[web.1]: production 2020-09-29T04:24:09.415266+00:00 app[web.1]: server is listening at port 40890 2020-09-29T04:24 ...

MariaDB won't generate JSON output for a column that has a JSON data type

Currently, I am utilizing MariaDB and phpMyAdmin to effectively manage my database. Within one of my tables, I have a specific field that is defined as type json, or alternatively longtext. However, whenever I execute a SELECT query using JSON_EXTRACT(fiel ...

Forcing UTF-8 Encoding in JavaScript

I came across this helpful article: While following the advice of many others suggesting to use unescape(encodeURIComponent(srt)), I encountered issues. Attempting to convert the file obtained through XMLHttpRequest did not yield the desired results. Pri ...

The middleware function in my express server is not being identified

Currently, I am tackling server-side rendering in React and have developed a basic server in Express. However, I'm encountering the "TypeError('app.use() requires a middleware function')" error repeatedly. Below is a snippet of my app.js: v ...

Adjust the border color of a TextField in react/material ui based on whether props are required

If a value is required, the TextField border color will be red. Once a value is entered, the red border will disappear. Check out the images by clicking on the links below: Entered Value Without Value with Required field ...

Having trouble performing an Image (base64) update in Next.js

Hi everyone, I'm facing a challenge with updating the image data in my code. The base64 string data updates correctly and the new image is displayed before submitting the data. However, once I submit the data, the image doesn't update. Below is ...

Error encountered while trying to display the react-bootstrap table

I am having trouble rendering sample data using react-bootstrap tables. Every time I try, I encounter the error: TypeError: Cannot read property 'filter' of undefined I've searched on various platforms and visited multiple links, but I ca ...

Enhancing jQuery Rating Plugin

Currently, I am working on customizing the jQuery Bar Rating System Plugin. You can view an example of the plugin by visiting this link: . The rating system on my end will resemble Example D. Rather than having the plugin based on user input, my goal is to ...

Using JavaScript to dynamically invoke a function and pass parameters dynamically

Exploring a dynamic method call with parameters in JavaScript. let obj = { method: 'foo1', params: ['one', 'two'] } foo1(p1, p2) { // do something } To execute it => [obj.method](obj.params) Is there a way to dyn ...

Failed to locate lodash during npm installation

I recently set up my project by installing lodash and a few other libraries using npm: npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-testem --save-dev npm install sinon --save-dev npm install -g phantomjs npm install lodash --save ...

Please explain the display property used in Bootstrap input groups

I have been working on implementing a button that toggles the visibility of a datepicker when clicked. <a class="btn btn-primary btn-lg mr-5" href="../Stores/stalls.html">Check Current Operating Stalls </a> <div style="vertical-align: t ...

Mastering the Art of Integrating API and JSON!

I've developed a bot using botkit and the Zendesk API to retrieve information. There's a function in my bot that prompts the user for a search term, searches for relevant information using the Zendesk API, and displays the result. I'm faci ...