ng-repeat is malfunctioning in AngularJS

Retrieve an array from the server in this format:

https://i.sstatic.net/rsG6T.jpg

It should be displayed as follows:

<div class="object1">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>


<div class="object2">
<div class="content"></div>
<div class="content"></div>
</div>

The current output is like this:

<div class="object1">
    <div class="content"></div>
 </div>
<div class="object1">
    <div class="content"></div>
 </div>
<div class="object2">
    <div class="content"></div>
 </div>
<div class="object2">
    <div class="content"></div>
 </div>

This is my ng-repeat code:

<div class="feedback-container">
    <div ng-repeat="feedback in datasfeed | filter:keyword.classname " >
        {{feedback.id}}
        <div  ng-repeat="content in feedback.content" class="feedback-row gt-clear group group-content" >
        <div class="gt-left">
            <div class="ava-round-small"><img src="{{content.user_avatar}}"></div>
        </div>

        </div>
    </div>

</div>

How can I modify the code to achieve the desired outcome?

Answer №1

I prefer to handle it in this manner

  <div class="response-container">
    <div ng-repeat-start="response in dataresponses | filter:keyword.category " >
        {{response.id}}  
    </div>
    <div ng-repeat-end ng-repeat="data in response.data" class="response-row gt-clear group group-data" >
        <div class="gt-left">
            <div class="user-avatar-small"><img src="{{data.user_avatar}}"></div>
        </div>
    </div>
</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

Scrolling to zoom in on the div content

I need the ability to resize the content within a div without changing the size of the div itself when the user scrolls. The function I currently have is as follows: var zoomable = document.getElementById('zoomable'), zX = 1; window.addEvent ...

JavaScript counter that keeps updating without pause

How can I create a live and continuous number counter on my website? After seeing the question above, I am interested in implementing a similar feature but with a slight twist. I am looking to have a counter that increments by 15.8 cents per second start ...

Finding the Text of an HTML Element

I need to retrieve the text content from an HTML element. For example, if I have <p>ABCD</p> I want the output to be ABCD It would look something like this: var html='<p>ABCD</p>'; var str = extractText(html); I belie ...

Utilizing classes as types in TypeScript

Why is it possible to use a class as a type in TypeScript, like word: Word in the provided code snippet? class Dict { private words: Words = {}; // I am curious about this specific line add(word: Word) { if (!this.words[word.term]) { this.wor ...

What are some methods to troubleshoot $injector type errors in TypeScript?

I'm currently facing an issue with my AngularJS code. Here is a snippet of what I have: this.$injector.get('$state').current.name !== 'login' But, it's giving me the following error message: error TS2339: Property 'c ...

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

Unblocking the context menu: How entering JS directly into the address bar compares to using a bookmark

Exploring the concept of blocking the context menu using JavaScript. Here's how you can block such a menu: document.addEventListener('contextmenu', event => event.preventDefault()); I recently came across an article that mentioned this ...

Unable to dynamically update properties in CSS and JavaScript without refreshing the page

I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...

The React Draft WYSIWYG editor's value is triggering a content security policy problem due to the presence of inline styles

What steps can be taken to resolve the content-security-policy problem stemming from inline styles in a react-draft-wysiwyg editor after deployment? The styles are not being applied, leading to this issue. How can it be rectified? ...

Initiate Action Upon Visibility

After discovering this script that creates a counting effect for numbers, I realized it starts animating as soon as the page loads. While I appreciate its functionality, I would prefer it to only initiate when the element is in view; otherwise, the animati ...

Can you explain the concept of an environment variable in the context of Node/Express?

This question may seem basic, but I haven't found a clear explanation for it yet. In my experience with Node/Express, I always set the following variable: var port = PROCESS.env.PORT || 9000 I understand that PROCESS.env.PORT is related to environme ...

Using the OR notation to declare the property name with 2 types is not functioning as expected for me

I'm having trouble with this solution. Here is the link to the source: Is it possible to declare a property with multiple types using the OR notation like this? export interface OnboardingSchoolModel { level?: string | number; school?: stri ...

Learn how to capture complete stack traces for errors when using Google Cloud Functions

In the codebase I am currently working on, I came across a backend service that I would like to utilize for logging all errors along with their corresponding Http statuses. If possible, I also want to retrieve the full stack trace of these errors from this ...

What steps are involved in importing remark-gfm into next.config.js?

I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' co ...

How come I am unable to save an array of objects in a State within React JS?

React JS component: When I make a request to the backend to fetch data stored in a MySQL table, it returns an array of objects. I store this data in a state called `favcoin`. However, when I console.log(favcoin), it displays an empty array [ ]. Strangely, ...

Utilizing AngularJS ng-repeat and Bootstrap to showcase database items in columns

I am currently customizing a template for my MEAN app and I am trying to showcase some information retrieved from the database in three columns. However, I am facing an issue where the ng-repeat function is only displaying the data in a single column. Bel ...

Dealing with multiple submit buttons in a form with Angular JS: best practices

I'm using AngularJS and I have a form where the user can enter data. At the end of the form I want to have two buttons, one to "save" which will save and go to another page, and another button labeled "save and add another" which will save the form an ...

Searching in jquery not functioning as intended

Greetings! I'm in the process of creating a live search feature similar to what's demonstrated at this link. However, I've encountered a minor issue with this snippet of code: jQuery("#result").on("click",function(e){ var $clicked = $(e.ta ...

Leverage Dropzone functionality in combination with node.js

Just starting out with node.js and experimenting with file uploads using drag and drop. Initially, I created a basic uploader without drag and drop functionality: var http = require('http'); var formidable = require('formidable'); ...

Issue with Pure Javascript FormData upload involving files and data not successfully processing on PHP end

My file upload form follows the standard structure: <form id="attachform" enctype="multipart/form-data" action="/app/upload.php" method="POST" target="attachments"> <!-- MAX_FILE_SIZE must precede the file input field --> <i ...