Using AngularJS to apply a class only if an element exists

I'm attempting to assign a class to li elements if they contain content. Check out my code:

<li ng-repeat="answer in answers" ng-class="{'textleft': textleft}">
    <p class="left" ng-bind="maintext"></p> 
    <p class="right" ng-bind="optionaltext" ng-model="textleft" ng-init="textleft=true" ng-if="answer.category != null"></p>
</li>

I want to center the text within the li if only one of the p elements is visible. It currently functions when I declare the ng-model textleft before the li ng-class. Does anyone have a solution to achieve this functionality?

javascriptangularjs

Answer №1

Have you considered using the same condition that determines whether to display the <p> tag in order to set the class?

<li ng-repeat="answer in answers" ng-class="{'textleft': answer.category != null}">
    <p class="left" ng-bind="maintext"></p> 
    <p class="right" ng-bind="optionaltext" ng-model="textleft" ng-if="answer.category != null"></p>
</li>

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 triggering functions when a user closes the browser or tab in Angular 9

I've exhausted all my research efforts in trying to find a solution that actually works. The problem I am facing is getting two methods from two different services to run when the browser or tab is closed. I attempted using the fetch API, which worke ...

javascriptangulartypescriptevent-handling

How can you utilize a previously opened window from another page in JavaScript?

One of my challenges involves managing windows in a JavaScript environment. When I open a child window using window.open("http://foobar","name"), it reuses the same window when opened with the same name, which is exactly what I want. However, if the origi ...

javascriptwindow.open

Pausing repetitive HTTP requests in an Angular 6 project within a do while loop

While waiting for the completion of one API call, I am recursively consuming an external API. The http calls are being made using import {HttpClient} from '@angular/common/http' As a newcomer to the framework, there may be something wrong in the ...

javascriptangulartypescriptangular-servicesangular-http

Switch videos within the video tag as you scroll

I am trying to implement a video tag within a div element on my website. Here is the current code: <div class="phone" align="center"> <div class="phone-inner"> <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo ...

javascriptjqueryhtmlcss

Iterating over an array of numbers in AngularJS

I have an array of numbers $scope.N = [1,2,3,4]. I want to loop through this array in my HTML code using ng-repeat, similar to the example with JSON ng-repeat. <div ng-repeat="num in N"> {{num}} </div> How can I achieve this with a ...

javascriptarraysangularjsnumbers

Encountering Issues with Yeoman Installation

As a newcomer to Ubuntu and Angular, I am in the process of setting up a Yeoman framework. However, whenever I try to run the "yo" command, I encounter the following errors: Error: EACCES, mkdir '/home/diarmuid/tmp/npm-2997-20XPEB7W' npm ERR! ...

angularjsyeoman

Is there a way to modify the maximum size limit for a POST request package?

I am encountering an issue while attempting to send an array of bytes using a POST request. In my server-side implementation, I am utilizing Node.js and Express.js. Unfortunately, I am receiving error code 413 or the page becomes unresponsive ('Payloa ...

javascriptnode.jsexpresshttp

Click to refresh a different component in ReactJS

My goal is to create a unique media player that can reload when a user wants to listen to an MP3 file. The concept is as follows: In media-player.js: - Display title, artist, and album art In programs.js: there is a button (LISTEN) that renders in medi ...

javascriptreactjsmaterial-ui

Bind a collection of Firestore documents dynamically using Vuexfire

I currently have a collection of firebase documents stored in a vuex state that is dynamically updated. My goal is to bind these documents with vuexfire dynamically as they are added or removed from the list. state: { docsToBind: [], // This array is dy ...

javascriptfirebasevue.jsgoogle-cloud-firestorevuexfire

Guide to retrieving objects in React.js

Struggling to extract a country from an online JSON file that I am currently fetching. I am attempting to streamline the process by creating a function to retrieve the country from the dataset and avoid repeating code. However, I am encountering difficulti ...

javascriptnode.jsreactjs

Node JS: Despite modifying the URL, the response remains unchanged

My attempt to log in to teeSpring.com and retrieve a response from another URL using a login cookie seems to be causing an issue. Upon logging into teeSpring.com, the dashboard details are returned. However, when I try to make a GET request to the second U ...

javascriptnode.js

Place the script tags within the div element

After loading a page dynamically, I found that only the contents of the div id="example" were being executed. However, the script tag inside the div was not being executed. I attempted to use eval to solve this issue, but it was unsuccessful. <div id=" ...

javascriptjqueryhtml

Unable to adjust the size of a DIV with a button click in Vue3

I am having trouble resizing a DIV block in Vue3. Whenever I click the button, I receive an error message saying "Cannot read properties of undefined (reading 'style')". I know there is an issue with the JS part of the code, but I'm not sure ...

javascripthtmlcssvuejs3

Retrieving information through callback functions

A function I developed checks a list of tags that are submitted to it, sorting the good ones into a "good" array and the bad ones into a "bad" array. This process occurs within a callback, allowing the rest of my code to continue once complete. However, I ...

javascriptjquery

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

javascriptjqueryhtml

Struggling with passing attributes to an AngularJS directive? You might be encountering the frustrating issue of receiving undefined values for

Currently, I am working on a directive that has four parameters being passed to it, all of which are bound to the directive scope. The problem I am facing is that despite the data existing and being loaded, the directive is receiving all values as undefin ...

javascriptangularjsangularjs-directiveangularjs-scope

How can I add multiple filters to a Kendo Grid?

Is there a way to include two separate filter fields for date filtering in Kendo Grid UI? Currently, the method I am using only allows for one date filter to be displayed. filterable: { ui: function (element: any) { element.ken ...

javascriptangulartypescriptkendo-uikendo-grid

Activate numerous progress bars to animate as the user scrolls beyond the designated anchor point

Check out my website here: I've spent a lot of time working on this site, but I've hit a roadblock when it comes to animating the skill bars. I still want them to animate as users scroll past a certain point, but I'm struggling to figure it ...

javascriptjqueryprogress-bar

An issue has arisen: It seems that properties of null cannot be accessed, particularly the 'toISOString' property

After upgrading the dependencies in my package.json to their latest versions, I encountered an error while accessing a page that calls this data. Given that the dependencies were outdated by at least 2 years or more, I suspect the issue lies with the updat ...

javascriptjsonangularweb

Instead of using a checkmark, consider using step numbers with Mui Stepper's Completed StepIcon

I'm currently utilizing Mui Stepper from [email protected] within a React project. Despite my efforts to search on platforms like Stackoverflow and Github, I have been unable to find a solution for displaying the step number upon completion inst ...

javascriptreactjsmaterial-uiuistepper