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

Expanding your JavaScript skills: Tackling nested object key and value replacements

I am looking to manipulate the values of a nested object using JavaScript. The structure of the object is outlined below. let jsonObj = { "service":[ { "name":"restservice", "device&quo ...

javascriptjsonobject

Using Vue Js to bind two values to an href attribute in a tag

As a Vue.js beginner, I am encountering an issue where I need to update two values simultaneously during rendering. <ul class="category-list"> <li v-for="category in categories"> <a v-bind:href="location/category.slug/all" v-tex ...

javascriptlaravelvuejs2vue.js

Error: Javascript unable to generate video thumbnail using ffmpeg

I'm having trouble generating a thumbnail from a video file using JavaScript. I keep encountering the error below: ChildProcessError: `/workspace/node_modules/@ffmpeg-installer/linux-x64/ffmpeg -ss 0 -i valid-video-link -f image2 -vframes 1 -vf scale= ...

javascriptnode.jsfirebaseffmpegcloud-storage

AJAX Username verification failing to validate

Working with PHP and MySQL, I created a basic form which includes a textfield for the username and a submit button. The page is named checkusername.php. Additionally, I implemented an AJAX function for handling this process. Subsequently, there is another ...

javascriptphpmysqlajaxhtml

Retrieving Information from Ajax Response Following a Successful Insert Query in Codeigniter

I am trying to use ajax method to insert form data into a database and then redirect it to the next page. I have successfully passed the data in ajax and inserted it into the database table. However, I am facing an issue with getting the generated referenc ...

javascriptphpmysqlajaxcodeigniter-3

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Utilizing Material UI, I have designed a table to showcase my data. In this setup, I am required to use renderCell for two specific properties: 'level by user' and 'level by referent'. Issue: The problem arises when Material UI displa ...

javascriptreactjsmaterial-uidatagrid

Ensure that Javascript waits for the image to be fully loaded before triggering the Ajax function

function addResource() { var imgIndex = getIndexByImageID(currentDraggedImgID); var newImageID = resourceCollectionSize.length; // Insert the image $('#thePage').append('<img alt="Large" id="image' + newImageID + &a ...

javascriptjqueryajax

Compatible with pure vanilla JavaScript, but not jQuery

I am currently facing an issue with attaching VKI (Virtual Keyboard Interface) to an element that is dynamically added to the DOM using JavaScript. The scenario involves a table with initially only one row, along with "Add Row" and "Delete Row" functionali ...

javascriptjqueryhtml

"Encountering a mysterious internal server error 500 in Express JS without any apparent issues in

My express.js routes keep giving me an internal server error 500, and I have tried to console log the variables but nothing is showing up. Here are the express routes: submitStar() { this.app.post("/submitstar", async (req, res) => { ...

javascriptnode.jsexpressblockchain

Live streaming updates directly from Firebase

In order to achieve real-time updates from Firebase, my objective is to retrieve comments from Firebase and display them on this.note. I seem to have made a mistake in the update() function. Here is the tutorial I followed: link. methods: { update(){ db.c ...

javascriptnode.jsfirebasevue.jsgoogle-cloud-firestore

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

javascriptphphtmlcsscodeigniter

Utilizing D3.js: Applying Multiple Classes with Functions

My current project involves using D3.js and I've encountered a particular challenge that has me stumped. In the CSV file I'm working with, there are columns labeled "Set" and "Year". My goal is to extract values from these columns and use them a ...

javascripthtmlcsssvgd3.js

Utilizing component state or props within Redux mapDispatchToProps operations

As a newcomer to Redux/React, I am still grappling with the concept of dispatch in the Redux environment. Currently, my approach to issuing Redux actions within components involves directly calling the dispatch() function from my component props: const ma ...

javascriptreactjsreduxreact-redux

Is there a way to manipulate the DOM without relying on a library like jQuery?

My usual go-to method for manipulating the DOM involves jQuery, like this: var mything = $("#mything"); mything.on("click", function() { mything.addClass("red"); mything.html("I have sinned."); }); Now I am looking to achieve the same result usin ...

javascriptdom

Exploring additional parameters within express.js

I'm currently working on creating an email sender that includes all necessary components such as 'from', 'to', 'subject', 'textBody', etc. However, I am facing a challenge in setting optional parameters in expre ...

javascriptnode.jsexpressemailnodemailer

Unexpected results: jQuery getJSON function failing to deliver a response

I am facing an issue with the following code snippet: $.getJSON('data.json', function (data) { console.log(data); }); The content of the data.json file is as follows: { "Sameer": { "Phone": "0123456789", }, "Mona": { "Phone": ...

javascriptjqueryjsonajaxasynchronous

Execute JavaScript function after the window has finished loading, regardless of any asynchronous downloads

In my app, there is an initialise function that I want to execute only when two conditions are met: first, the window has finished loading ($(window).load()), and second, Typekit has loaded. $(window).load(function() { try { Typekit.load({ act ...

javascriptloadwebfonts

What could possibly be causing my app to exhaust CPU resources on Mozilla Firefox?

I have created a unique game application for Facebook. Currently, the app is not optimized with AJAX technology, resulting in multiple server requests causing high CPU usage (specifically in Firefox) which slows down the overall performance of the app. Alt ...

javascriptajax

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Currently, I am working on a project where I aim to develop a customized feature in ng-select. This feature will enable the text entered in ng-select to be appended to the binding item and included as part of the multiselect function. If you want to see a ...

javascripthtmlangulartypescriptangular-ngselect

Tips for retaining focus on the same control following an asynchronous postback

I am experiencing an issue with my 3 textboxes, where one is placed in an update panel that refreshes every 4 seconds. Unfortunately, during the refresh process, the focus on controls outside of the update panel is being lost. I need a solution to maintain ...

c#javascriptjqueryasp.netajax