Using AngularJS to Apply a Class with ng-repeat

Using ng-repeat in my markup, I am trying to add text to each li element and also include an additional class (besides the 'fa' class). This is what I have done so far:

<ul class='social-icons' ng-repeat="social in myCtrl.socialArr">
        <li><i class="fa" ng-class={{social.iconClass}}></i><label>{{social.label}}</label></li>
</ul>

However, it's not functioning as expected.

In my controller, I have the following code:

self.socialArr = [
    {
        label: 'Facebook',
        url: 'facebook.com/',
        iconClass: 'fa-facebook'
    },{
        label: 'Twitter',
        url: 'twitter.com/',
        iconClass: 'fa-twitter'
    }...
javascriptangularjsangularjs-ng-repeat

Answer №1

Give this a shot

<ul class='social-links'>
  <li ng-repeat="link in ctrl.linksArray">
    <i class="fa" ng-class="link.iconStyle"></i>
    <label>{{link.text}}</label>
  </li>
</ul>

Answer №2

When there is no need for any conditional logic, it is more efficient to simply utilize the traditional class instead of using the ng-class directive. This approach can enhance performance by avoiding unnecessary digest cycles that may occur with ng-class when it is not required.

<ul class='social-icons' ng-repeat="social in myCtrl.socialArr">
<li>
   <i class="fa" class={{social.iconClass}}></i>
      <label>{{social.label}}</label>
</li>
</ul>

Answer №3

When passing {{expression}}, it is evaluated as a string. However, ng-class expects an expression [ng-class="expression"].

Options for implementation include:

  1. Using the ng-class directive.

    a. ng-class="expression"

    b. class="ng-class: expression;"

  2. Utilizing Interpolation [{{expression}}]

    class="{{expression}}"

Note: The use of :: indicates one time bindingdocument link

Answer №4

<i class="fa {{::social.iconClass}}">

Using this method ensures optimal performance as it does not create any new watchers.

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

Can the server-side manipulate the browser's address bar?

Picture this scenario: a public display showcasing a browser viewing a web page. Can you send a GET or POST request from a mobile device to an HTTP server, causing an AJAX/pubsub/websocket JavaScript function to alter the displayed page on the screen? Per ...

javascripthtmlnode.js

What are the steps for configuring my Angular directive in this specific scenario?

Looking to create a directive that implements isolate scope. Here's the code snippet: angular.module('myApp').directive('itemCollection', ['$cookies', function($cookies) { return { restrict ...

javascriptangularjsangularjs-directive

Code Not Functioning on Website Despite Working in Console

I've developed a jQuery script that eliminates any delivery methods containing the phrase "Royal Mail" if certain products are present in the user's cart. The script functions flawlessly when executed in Google Chrome Console but fails to work wh ...

javascriptjqueryhtml

"Learn how to add up elements in an array based on their unique IDs and generate a new array using

There is an array called data that looks like this: const data = [ {"id": "One", "number": 100}, {"id": "One", "number": 150}, {"id": "One", "number": 200}, ...

javascriptreactjsarraysreact-nativesum

Is there a way to delay rendering the html until all the content has been fully downloaded?

Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still ...

javascripthtmlcssajax

Hiding elements in HTML with React when data is null

Is there a way to hide elements using classes like "d-none" when the data is null in React? <span className="product__tag">{prod.tag1}</span> <span className="product__tag">{prod.tag2}</span> <span classN ...

javascripthtmlcssreactjs

reCAPTCHA v3 - Alert: There are no existing reCAPTCHA clients available

After coming across a similar issue on Stack Overflow (link to the question here), I attempted to implement reCAPTCHA on my website to combat spam emails received through the form. Despite following Google's instructions, I encountered an error that p ...

javascriptphpajaxrecaptchacaptcha

Set the userID variable as the assigned value and the username variable as the ng-model attribute for a select

Seeking assistance with a coding dilemma. Currently working on an ASP.Net MVC and AngularJS application, where I am utilizing the select tag to display a list of users. Both the select tag and a div are connected via the same ng-model for real-time binding ...

htmlangularjsasp.net-mvc

Vue alert: Issue encountered in data() - "TypeError: Unable to convert undefined or null to object"

Can anyone help me figure out how to remove this warning? I suspect it's because I'm trying to manipulate an undefined object. Any assistance would be greatly appreciated! Thank you! Here is the code snippet: <v-card class="ma-3 pa-3" v-for=" ...

javascriptvue.jsundefinedwarningstypeerror

Issues with implementing Bootstrap tabs in Vue application

Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...

javascripthtmlcsstwitter-bootstrapvue.js

How to access a Selenium element using JavaScriptExecutor

My task involves working with a collection of elements in Selenium, specifically located using the By.CssSelector method: var contentRows = new List<TableRow>(); for (var i = 1; i < PositiveInfinity; i++) { var cssSelectorToFind = $"tbody &g ...

javascript.netseleniumselenium-webdriverwebdriver

Tips for Managing the Hardware Back Button in Ionic 3

Can someone help me enable the hardware back button in Ionic 3? I want it to redirect to specific pages and display designated content. Being new to Ionic 3, I need guidance on how to set up the hardware device buttons for redirection. ...

javascriptandroidiosangularionic-framework

Issue encountered while trying to load electron-tabs module and unable to generate tabs within electron framework

I've recently set up the electron-modules package in order to incorporate tabs within my Electron project. Below are snippets from the package.json, main.js, and index.html files. package.json { "name": "Backoffice", "version": "1.0.0", "descr ...

javascriptnode.jsnpmelectron

Angular 2 is throwing an error, stating that Observable is not defined

I'm currently working with Observable and ChangeDetectionStrategy to notify other components about any changes that occur. However, I am encountering an issue where the Observable object addItemStream is coming up as undefined. Can anyone spot what mi ...

angularjstypescriptangular

Passport JS allows you to create a secure login form that redirects users to different URIs based on their role

Currently, I am utilizing Passport JS for authentication management and Express JS to handle routing within my application. At the moment, I have a login route that directs to the /teacher URI upon successful authentication (as depicted below). app.post( ...

javascriptnode.jsexpresspassport.js

Strange results appearing on my node.js server - removing object

When I run node.js in the terminal, I get this output: node server.js { hand: [ [ [Object], [Object] ], [ [Object], [Object] ], [ [Object], [Object] ], [ [Object], [Object] ] ], deck: [ { suit: 'c', rank: 'a' ...

javascriptnode.js

Click event to reset the variable

The code snippet in Javascript below is designed to execute the function doSomethingWithSelectedText, which verifies if any text is currently selected by utilizing the function getSelectedObj. The getSelectedObj function returns an object that contains in ...

javascripthtmlcssdom-events

Handling data type switching effectively for pairs in JavaScript

Imagine I have the following list: 1: Peter, 2: Mary, 3: Ken ... I am looking to create a function called switch that would return values like this: let value1 = switch("Peter") // returns 1 let value2 = switch(3) // returns "Ken" I ...

javascriptreactjs

Attempting to create a JavaScript function that will show a JSON array when the next button is clicked

I am facing an issue with displaying a JSON array based on specific start and end indices. Even though I managed to display the entire array, the first button click does not seem to work as expected. Upon clicking the first button, an error message "this.d ...

javascriptjqueryjson

Obtaining an identification using JQuery for content that is constantly changing

I am currently developing dynamic content tabs using PHP, with one of the objects being a datatable within the tab. In order to define the ID via PHP, I use the following code: PHP: echo '<table class="table table-striped table-bordered table-hov ...

javascriptphpjqueryhtmldatatables