Having trouble with the ng-class syntax?

I've been diving into the world of Angular.js and came across this code snippet:

<button ng-class="{'btn pull-left', 
duplicatesInList === true ? 'btn-warning': 'btn-success'}" 
id="saveScoreButton" type="button" ng-click="add()"><button>

There seems to be a syntax error in there, but I can't quite pinpoint it... What I'm trying to achieve is to detect duplicates in a list and when found, notify the user by changing the style of the save button (class btn-warning). Any help would be greatly appreciated, thank you in advance. Update: Here's what the console logged:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%2C&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=17&p3=%7B'btn%20pull-left'%2CNaNuplicatesInList%20%3D%3D%3D%20true%20%3F%20'btn-warning'%3A%20'btn-success'%7D&p4=%2C%duplicatesInList%20%3D%3D%3D%20true%20%3F%20'btn-warning'%3A%20'btn-success'%7D

Quite puzzling for me. SOLUTION:

ng-class="duplicatesInList === true? 
'btn btn-warning pull-left': 'btn btn-success pull-left'"

The solutions provided in other answers also work (and in my opinion are slightly better written than my own solution:) )

javascriptangularjstwitter-bootstrapbuttonng-class

Answer №1

<div ng-class="{
    'btn pull-right' : true,
    'btn-danger' : itemsToReview,
    'btn-primary' : !itemsToReview
    }"
id="submitFormBtn" type="button" ng-click="submitForm()"><div>

Answer №2

Consider this alternative approach:

<button class="btn pull-right" 
ng-class="showDuplicates ? 'btn-danger': 'btn-primary'"
id="updateButton" type="button" ng-click="saveChanges()"></button>

Answer №3

Check out this example that's ready to go:

Here's the code in HTML:

<div ng-app='myApp' ng-controller='testCtrl'>

<button ng-class="{
    'btn-pull-left' : true,
    'btn-warning' : duplicatesInList,
    'btn-success' : !duplicatesInList
    }" id="saveScoreButton" type="button" ng-click="add()">Click Here</button>
    </div>

For the CSS styling, here is the code:

.btn-pull-left
{
    float:left;
}

.btn-warning
{
    color:blue;
}

.btn-success
{
    color: green;
}

In the JavaScript section, we have:

angular.module('myApp',[]).
controller('testCtrl',function ($scope){
    $scope.add = function(){
        $scope.duplicatesInList = !$scope.duplicatesInList;
    }
});

Don't forget to check out the FIDDLE for a closer look.

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

Convert less to CSS using the less.modifyVars() function along with Angular

I've created a list of inputs using the following code: <div ng-controller="MainCtrl"> <div ng-repeat="variable in variables"> <label>{{ variable.slug }}</label> <input type="text" ng-model="variable.value" ng-chang ...

angularjsless

Executing a function within a ng-repeat iteration

Is there a way to call a method within an ng-repeat loop, even if the element does not exist at that moment? I'm facing this issue and I'm not sure how to resolve it... The ID seems to be correct. Strangely, when I run it in the console after ev ...

javascripthtmlangularjs

Utilizing jQuery to eliminate a script function from an external webpage

Currently, I am utilizing a ColdFusion script to load an external page within the container tag. This external page contains a sorting function defined as: function sorting(sortid). However, this function's sorting criteria constantly leads to errors ...

javascriptjqueryhtml

Storing a component in browser storage using JavaScript and Angular

I am currently working on developing an Angular application that allows users to "favorite" a business card and store it in local memory. I am facing challenges with actually storing the clicked element in the browser's local memory. Furthermore, I f ...

javascriptjqueryangularjsfrontend

Running a designated AJAX function from a variable by utilizing Applescript

Struggling to execute a JavaScript code within a page using Applescript. In the JavaScript, an AJAX function was defined like so: var myFunction = function () { // Here be the code... } I attempted this in Applescript: do JavaScript "document.myFunct ...

javascriptajaxapplescript

The function io.sockets.in(roomName) does not seem to be properly listening for myEvent after joining the

I am looking to dynamically create rooms based on incoming requests from the front end. I found guidance in this gist. My goal is for a specific room to listen for events and communicate with other members within that room. However, I am experiencing an i ...

javascriptnode.jssocketsexpresssocket.io

What is the correct way to securely send the username and password from a ReactJS frontend to the backend for authentication?

My React application includes an onChange function on a form that collects username and password. Upon submission, the username and password are sent to the server side using redux dispatch in Node.js. On the server side, I am authenticating the credentia ...

javascriptnode.jsreactjs

Filtering DataGrid columns with an external button in Material-UI: A step-by-step guide

Imagine having a datagrid table structured as shown below: import * as React from 'react'; import { DataGrid, GridToolbar } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; const VISIBLE_FIEL ...

javascriptreactjsmaterial-ui

How can I animate scrolling up or down using jQuery and CSS?

I have a a element that triggers an action when clicked: <a href="#" class="hel" onclick="YPCP1_();">Scroll down</a> Also, function YPCP_(){ var scroll = $(window).scrollTop(); window.scrollTo(0, 600); } The function successfully sc ...

javascriptjqueryhtmlcss

User authentication using .pre save process

I have an API that accepts users posted as JSON data. I want to validate specific fields only if they exist within the JSON object. For example, a user object could contain: { "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

javascriptexpressmongoose

Managing various events in AngularJSHandling multiple events in AngularJS

In my Angular application, I am updating a div when a tag is clicked. Now, I also need to change the route when the tag is clicked. How can I achieve this in AngularJS? ...

angularjs

Transforming a JSON into a JavaScript object using deserialization

Within a Java server application, there exists a string that can be accessed through AJAX. The structure of this string is exemplified below: var json = [{ "adjacencies": [ { "nodeTo": "graphnode2", "nodeFrom": "graphnode1" ...

javascriptjsondeserialization

Navigating through events within React

I'm working on creating a login page, where upon clicking the submit button it should navigate to the Dashboard page. However, I seem to be encountering an issue with my code. After entering login details and clicking on the login button, the details ...

javascriptreactjsauthenticationreact-router

I need a layout similar to the navbar on http://thecoloradan.com/ but I am not asking for instructions on how to do it

Have you seen the stunning navbar on this website? It appears to merge with the background upon loading, then smoothly shifts to the top of the page as you scroll. The transition is accompanied by a lovely animation. I am curious about the steps needed to ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to style date strings in JavaScript, jQuery, or CSS

Below are dates that need formatting: 7-sep, 14-sep, 21-sep, 28-sep, 5-oct,12-oct, 19-oct,26-oct, 2-nov, 9-nov, 16-nov, 23-nov,30-nov, 7-dec,14-dec, 21-dec,28-dec-2013. Is there a way to tidy them up using JavaScript, jQuery, or CSS? Ideally, I would lik ...

javascriptjqueryhtmlcss

Create an animation effect where a div increases in height, causing the divs beneath it to shift downward in a

My aim is to create columns of divs where the user can click on a div to see more content as the height expands. I've managed to set this up, but it seems there's an issue with the document flow. When I click on a div in the first column, the div ...

javascriptjqueryhtmlcss

Executing jQuery function through variable reference

My goal is to modify the jQuery function being used based on the value of a switch statement. In this scenario, I want to select the element and then apply the appropriate jQuery function depending on the 'direction' parameter. $('#'+t ...

javascriptjqueryjquery-plugins

Click-o-Meter: Tracking Button Presses

I’m looking to develop a button click counter that increases every time it is downloaded. I want to implement this functionality without using a database. Here's the code snippet: <?php $counterFile = 'path/to/counter.txt' ; ...

javascriptphpjqueryajax

Modifying the initialValues prop on a Formik Form does not reflect changes in the input values

Utilizing a Formik form with forward refs in the following manner Form.js import React from "react"; import FormikWithRef from "./FormikWithRef"; const Form = ({ formRef, children, initialValues, validationSchema, onSubmit }) ...

javascriptreactjsformik

Mastering the Art of jQuery Post with Iteration and Result Utilization

I am facing an issue with my code function fetchInfoFromDB() { let body = ""; let text = ""; $("tr").each(function (index) { let code = $(this).children("td:nth-child(2)"); $.post("http://urltogetdatafromdatabase.com/getinfo.ph ...

javascriptjquery