What is the best way to incorporate HTML within an ng-repeat loop?

Is there a way to dynamically bind the response data to the HTML generated inside ng-repeat?

Currently, only socialCount is being bound for all li's.

Check out this snippet of my HTML code:

<li ng-repeat="category in inbox.categories track by $index">
    <a href="#">
        <div class="left-row" ng-click="inbox.showView(category)" target="_self">
            <div class="leftcolumn1"><span class="glyphicon glyphicon-user"></span></div>
            <div class="leftcolumn2">{{category}}</div>
            <div class="leftcolumn3 email-time" ng-bind="inbox.messageCounts.socialCount"></div>
        </div>
    </a>
</li>

The server responds with this data:

{"socialCount":431,"promotionsCount":17843,"updatesCount":26997,"forumsCount":1780}

This is the JavaScript function I am using:

Inbox.prototype.getMessageCounts = function(categories){

$http.get(
this.messageCountUrl + this.userGuid).success(function(data){
    this.messageCounts=data;
}.bind(this));

Answer №1

Discovered the solution, now all that's left is to complete this task.

<div class="leftcolumn3 email-time" ng-bind="inbox.messageCounts.{{category|lowercase}}Count"></div>

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

How to Manage JSON Responses Using jQuery

After receiving the server response, the data looks like this: {"invalid_emails":["adsasdasd"],"result":"success","valid_emails":["<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204a4f4253604150504c450e43e041f4d">[email ...

React - Warning: It seems like the App component is not returning anything from the render method. This typically occurs when a return statement is missing. To render nothing, simply return null

I'm currently working on a MERN and GraphQL Apollo full stack application. To connect the backend with the client, I am utilizing Apollo Client. Below is the code snippet: ApolloProvider.js import React from "react"; import App from ". ...

Reset checkboxes in Material UI data grid

Currently, I am immersed in a React Js project that involves various tabs, each containing a unique data grid table with rows featuring checkboxes. Issue: Whenever I select a row from Table 1 and navigate to Tab 2 before returning to Tab 1, the checkboxes ...

Using JavaScript regex to eliminate content enclosed in parentheses, brackets, and Cyrillic characters

Is there a way to transform (Test 1 / Test 2) [Test 3] Отдел / Here is title - subtitle (by Author) - 1234 (5678-9999), descriptions (best), more descriptions into Here is title - subtitle (1234) (descriptions) using a combination of JavaScript an ...

Troubleshooting objects in Javascript: Understanding the scope problem with 'this'

Here is my code snippet: var tradingInterface = function() { this.json = ''; this.init = function() { $.get( '/whatever',{}, function(data) { this.json = data; // Rebuilds Everything ...

What is the best way to traverse through a nested JSON file with d3.js?

Greetings. I am currently facing a challenge in navigating through a nested JSON file. Below is the JSON data that I need assistance with: {"Id":466,"Name":"korea", "Occurrences": ...

Storing data in MongoDB upon the emission of a Socket.io event

In my project, I am using a MEAN stack and Socket.io to retrieve images from the real-time Instagram API. The current setup is functioning well, but now I want to store image data in a MongoDB database to maintain a record of images based on locations, rat ...

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

What could be causing express to have trouble finding the ejs file in the views directory?

Recently delved into the world of learning NodeJS and Express. // Working with express framework var express = require("express"); var app = express(); app.get("/", (req,res) => { res.render("home.ejs"); }) //Setting up port listening app.listen ...

Embedding Facebook data into an HTML document

While I am able to retrieve data from Facebook and display it on the console, I am facing issues when trying to display it on an HTML page. I attempted using: $("#mydiv").text(data); or $("#mydiv").append(data); However, this displays [object Object] ...

Hear the sound of a modal being triggered with a

I am working with AngularJS and have encountered an issue where I need to create a popup inside the controller. My code looks something like this: var popupTemplate = '<div class="modal fade">' + ' <div cla ...

What is the process for displaying a Bootstrap Icon on a webpage?

I recently started using Bootstrap and I'm in the process of creating a login screen for my app. I want to incorporate MDBIcons for Google, Twitter, and Facebook. I referred to the documentation provided at However, upon previewing my webpage, I enco ...

JS URL verification: ensuring valid URLs with JavaScript

Is it possible to combine two scripts that perform separate actions, one clicking a button and opening a new window, and the other interacting with elements in that new window simultaneously? function run() { var confirmBtn = document.querySelector(".sele ...

The input '{ data: InvitedUser[]; "": any; }' does not match the expected type 'Element'

I'm currently facing a typescript dilemma that requires some assistance. In my project, I have a parent component that passes an array of results to a child component for mapping and displaying the information. Parent Component: import { Table } fr ...

Issues occurring with PhoneGap preventing the execution of AngularJS code

I've recently delved into learning AngularJS with PhoneGap and I have a basic HTML code along with some AngularJS snippets. While everything runs smoothly in the browser, only the HTML portion seems to work when I attempt to run it on my Android phone ...

What is the process for updating a document with two specific filter conditions?

I have a structure in my document that appears as follows: type Document = { _id: string title: string variants: VariantType[] } type VariantType = { timestamp: Int active: Boolean content: any[] } I am attempting to filter a document using ...

What are the steps to showcase a randomly generated number in a live Flot chart using Json?

In my C# page, I have created a random number stored in a json object: if (method == "rnd") { //Random number this.Page.Response.ContentType = "application/json2"; Random rnd = new Random(); int nr = rnd.Next(1, 100); // generates a number ...

Retrieve the user's unique identification number upon creation and proceed to update the database accordingly

I'm trying to create a cloud function that automatically adds 50 points to the "points" field in the database whenever a new user is created using the "onCreate((user)" function. The goal is to simply detect when a new user is created, retrieve their ...

At what specific times is it most appropriate to use parentheses when dealing with functions?

Check out my code snippet below: const cleanRoom = function() { return new Promise(function(resolve, reject) { resolve('Cleaned The Room'); }); }; const removeGarbage = function(message) { return new Promise(function(resolve, reject) ...

Dealing with HttpErrorResponse on my Angular and Node.js website

Recently, I undertook the task of creating a server and connecting it to a front-end interface. Utilizing NodeJS, I successfully set up an API that allows users to create patient profiles through a signup form. However, when attempting to integrate this se ...