Adjusting ng-class depending on a certain condition in the controller

I need help updating ng-class to apply a CSS class with a unique background image. Here is an example of what I am trying to achieve:

<button id="search" ng-class="{travel: travel }">Search</button>

for(var i = 0; i < arrayLength; i++) {

    var descriptions = uniqueFilters[i].split(' ');

       if(descriptions.indexOf('Travel') > -1) {
           $scope.travel = "travel";

             } else {

                }
           }}

When I receive an array of strings, I split the sentences into individual words. If a specific word is found, I update the class to add a background image. How can I make this work effectively?

javascriptangularjs

Answer №1

According to @Dave V's comment, when using the ng-class directive, a boolean value is required for the 'travel' class to be applied:

$scope.travel = true;

If you need to use a string, you can try the following:

ng-class="{travel: travel == 'travel' }"

I hope this explanation helps =)

Answer №2

To utilize the ngClass directive in AngularJS, you can pass a function that must result in either true or false.

For example, if you define a function named travel in your controller, you can pass it into the directive within your view as shown below:

<button id="search" ng-class="{travel: travel() }">Search</button>

Within your controller:

// ... your other code

$scope.travel = function() {

  for (var i = 0; i < arrayLength; i++) {

    var descriptions = uniqueFilters[i].split(' ');

    if (descriptions.indexOf('Travel') > -1) {

      // Condition is met, add class 'travel' to the button
      return true;

    }

  }

  // Condition not met in the loop, class 'travel' will not be added
  return false;

}

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 the process for establishing a connection between two sets of data?

I am working with two mongoose models: user.js and note.js, which correspond to the collections notes and users. I want users to be able to save their notes, but I'm unsure how to create relationships between these collections. Ideally, I would like t ...

javascriptdatabasemongodbmongoosemongoose-schema

Guide to automatically inserting text into an html form and submitting it without manual intervention

Currently, I am in the process of a project where my main goal is to design an HTML form for submitting replies. One interesting feature I want to include is an option for users who are feeling lazy to simply click on "auto-generate comment", which will ...

javascriptjqueryhtml

Collaborate and apply coding principles across both Android and web platforms

Currently, I am developing a web version for my Android app. Within the app, there are numerous utility files such as a class that formats strings in a specific manner. I am wondering if there is a way to write this functionality once and use it on both ...

javascriptjavaandroidtypescriptweb

Conceal the element if the offspring is devoid of content

I want to implement a feature where a div is hidden when its child element is empty. To achieve this, I aim to assign the class .no-content to the div if it contains no elements. Below is my existing code with spaces: <div class="ee-posts-list&quo ...

javascripthtmldisplay

Is there a way to sort through a data object using a state array in React?

I have found a solution! The code below now displays a functioning example. My latest project involves creating a React portfolio with a Filter system. Users can visit the portfolio page and choose filters (web design, development, etc.) to view specific ...

javascriptreactjs

Tips for designing a unique style attribute for your Vue.js component

My goal is to utilize Vue.js without the need for a build step, but I've encountered an issue with its lack of a style property. To tackle this problem, I came up with the idea of creating a custom "style" property on my Vue component instance and dy ...

javascriptvue.jsvue-component

Deactivate the submit button when the form is not valid in angularjs

I am currently facing a challenge with my form that contains multiple input fields. To simplify, let's consider an example with just two inputs below. My goal is to have the submit button disabled until all required inputs are filled out. Here is wha ...

javascriptangularjsforms

Capturing keydown events exclusively in the topmost layer of the HTML document

Currently, I am developing a web application that includes an underlying HTML file with some JavaScript functionality that I cannot modify. In my code, I create a layer on top of this page using CSS with z-index: 1000;. However, I am facing an issue where ...

javascripthtmljquery

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

Creating dynamic styles with Material-UI's useStyles

Attempting to implement the same logic using material-ui's useStyle feature <div className={'container ' + (state.unlocked ? 'containerUnlocked' : '')}> I thought it might look like this: <div className={`${clas ...

javascriptcssreactjsmaterial-ui

Utilize Bootstrap in an Angular template to effortlessly expand one element while collapsing all others

I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...

javascripthtmlcssangularangular-ui-bootstrap

What is the best way to remove all elements in jQuery?

I need to remove the selected element in my demo using jstree. I have consulted the plugin's API at http://www.jstree.com/api/#/?f=deselect_all([supress_event]), but it seems that it does not deselect the item properly. Here are the steps I have follo ...

javascriptjqueryjstree

Leveraging server-side data with jQuery

When my client side JQuery receives an array of JSON called crude, I intend to access and use it in the following way: script. jQuery(function ($) { var x = 0; alert(!{JSON.stringify(crude[x])}); ...

javascriptjquerynode.js

How to handle multiple formData input in NestJS controller

How can I create a controller in Nest.js that accepts two form-data inputs? Here is my Angular service code: public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> { const formData = ...

javascriptangulartypescriptnestjs

Using MVC4 and jQuery to unselect items from an Html.CheckboxListFor

In my search page, I am utilizing jQuery to toggle the visibility of different sections based on user input. Specifically, I have a Html.Textbox and Html.CheckboxListFor that are shown or hidden depending on whether there is any input in the textbox or if ...

javascriptjqueryasp.net-mvc-4checkboxlist

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

javascripthtml

retrieving data from a node and embedding it into an HTML file

In my project, I have an index.html file and an app.js nodejs file. Within the app.js file, there is a variable named "name" that I would like to display in my index.html page. Here is the code snippet: var name = "Utsav"; var HTTP = require('HTTP&a ...

javascripthtmlnode.jsserverserver-side

Ajax is coming back with a value that is not defined

Currently, I am working on a search function that is responsible for searching a name from the database. When the user clicks "add", the selected item should appear below the search field so that it can be saved in the database. However, I am encountering ...

javascriptphpjqueryajaxzend-framework

JSON returning issue with date formatting

After converting a date to a string using ToString("d") in C# and then serializing it into JSON for the client, I'm encountering an issue where instead of displaying the formatted date on the page, I see the following literal text: /Date(-62135575200 ...

c#javascriptjson

Is it true that loading "undefined" into an array can use up a significant amount of memory?

I've encountered a strange issue where a bug is consuming excessive memory and leading to frequent server crashes. Every 30 seconds, a value is saved to an array: historicalValues.push( valueToSave ) When valueToSave is set to 1, the memory usage r ...

javascriptarraysnode.jsmemoryundefined