Is there a way to efficiently create an ng-repeat for multiple divs?

I am looking to iterate through a collection of divs, as mentioned below. Each object in the list will have content-data and a link to an image. The code provided shows individual entries for each list item, but I would like to retrieve it from the angular object instead. I am currently stuck on this issue.

<div class="panel-body">
  <div class="media"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces1.jpg" alt=""> </a>
    <div class="media-body">
      <div class="pull-right">
        <div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="Attend Test" class="btn btn-default"><i class="fa fa-check fa-fw"></i>Going To Attend Test</a> </div>
        <!-- /.btn-group --> 
      </div>
      <!-- /.pull-right -->
      <h5 class="media-heading"><a href="#">Purchase 4 items ($80)</a></h5>
      <div class="text-muted"> <small><i class="fa fa-user fa-fw"></i> Rose Davies</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i> 16 minutes</small> </div>
    </div>
    <!-- /.media-body --> 
  </div>
  <!-- /.media -->
  <hr>

  <!-- More similar div elements with different data -->

I have only used ng-repeat in table data. Is it possible to populate the entire object and repeat it through iteration?

javascriptcssangularjsangularjs-ng-repeat

Answer №1

To achieve this, follow the example code snippet provided below:

<div class="media" ng-repeat="item in itemList track by $index">
  <a class="pull-left item-avatar" href="#">
    <img class="item-image" src="images/sample.jpg" alt="">
  </a>
  
  <div class="media-body">
    <div class="pull-right">
      <div class="btn-group btn-group-xs">
        <a href="#" rel="tooltip" title="Action" class="btn btn-default"><i class="fa fa-check fa-fw"></i>{{item.text1}}</a>
      </div>
      <!-- /.btn-group -->
    </div>
    
    <h5 class="media-heading"><a href="#">{{item.text2}}</a></h5>
    <div class="text-muted"> 
      <small><i class="fa fa-user fa-fw"></i>{{item.text3}}</small>&nbsp;&nbsp;&nbsp; 
      <small><i class="fa fa-user fa-fw"></i>{{item.text4}}</small> 
    </div>
  </div>
  <!-- /.media-body -->
</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

Guide to utilizing exact matching functionality in ExpressJs router

In my ExpressJs application, I have defined two routes like so: router.get("/task/", Controller.retrieveAll); router.get("/task/seed/", Controller.seed); When I make a request to /task/seed/, the Controller.retrieveAll function is call ...

javascriptnode.jsexpressbackendrouter

Tips for including extra items in a JSON String using Angular 2

function execute(req:any): any { var stReq = JSON.stringify(req); // Adding additional item "Cityname": "angular2City" inside req req.Cityname = 'angular2City'; } Now, how can I include the additional item "Cityname": "angular2C ...

javascriptjsonangular

Safari's anchor links tend to leap higher than necessary

One of the anchor links on my website is behaving strangely in Safari, both on iPhone and MacOS. Instead of scrolling to the correct position of the anchored div, it scrolls to a random location around 400-500px higher than it should be. All other anchor l ...

javascripthtmlreactjssafari

Learn how to efficiently apply styles to multiple objects within an array using the material-ui library

Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles. const data = [ { id: 1, color: '#000' }, { ...

javascriptcssreactjsmaterial-uijavascript-objects

The results obtained from using $http get are not the same as those obtained

While attempting to retrieve user reports using a User $resource, I encountered an unexpected object format in the returned result: {0: "n", 1: "a", 2: "m", 3: "e", 4: ",", 5: "e", 6: "m", 7: "a", 8: "i", 9: "l", 10: ",", 11: "p", 12: "a", 13: "r", 14: "t ...

angularjsnode.jsexpressngresourceangular-http

Utilize AngularJS to transform images into base64 format

My project involves allowing users to upload their images and then converting them into a specific format before sending them to a .Net RESTful service. As I am new to AngularJS, I could use some assistance with this task. Any help would be greatly appre ...

angularjsimage-conversion

Display the column every time the user types something into the search bar

Currently working on an Angular project and I'm trying to figure out how to make the middle column visible whenever the user enters text in the search bar. At the moment, I have a search bar for user input and three flex columns. The middle column is ...

htmlcssangularlayoutmultiple-columns

Struggling with the adaptability of my website's footer section

I'm facing a dilemma... No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assign ...

htmlcssformsiframeresponsive

PointerLockControls maintains a constant speed without slowing down (threejs)

I have integrated THREE.PointerLockControls into my project following the implementation demonstrated in this example (view code). The code seems to be accurately translated from the example, but I am facing issues with deceleration of the controller once ...

javascript3dthree.js

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

javascripthtmlcssflexbox

Adjusting solely the depicted data sets in the Highcharts.js library

I have a spline chart with 10 different curves on it - When the page is first loaded, none of the charts are visible as I have set "visible" to false. Users will then click on the curve(s) they want to see. I am looking for a way to dynamically change the ...

javascriptjquerypythonhighcharts

CodeIgniter 3 fails to handle jQuery ajax calls

I am currently tackling an ajax request issue in CodeIgniter 3. The task involves clicking on a checkbox to trigger the changVisib() function. Upon reviewing the code snippet, everything appears to be functioning correctly as the alert() is being executed. ...

javascriptjqueryajax

Crafting a Visual Storybook with Express.js

I am currently working on developing a photo album app using MEVN. In this project, the value of req.body.ALBUM is used as the folder name and req.body.DESCRIPTION is designated for describing the content. The issue I have encountered so far is that whil ...

javascriptnode.jsexpress

Transmit ByteArray to JavaScript

Is there a way to send a jpg image as a ByteArray from ActionScript 3 to JavaScript? Additionally, how can one convert a ByteArray back into an image using JavaScript? ...

javascriptapache-flexflashactionscript-3arrays

Create a default function within a mongoose field

Is there a way to achieve the following in my code: var categorySchema = new Schema({ id: { unique: true, default: function() { //set the last item inserted id + 1 as the current value. } }, name: String }); Can this be done? ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to resize a PDF to match the width and height of a canvas using

I need help with a project involving rendering previews of PDF documents in a UI similar to Google Docs. {documents.map((doc) => { return ( <div key={doc.id} className=" ...

javascriptreactjspdfcanvaspdf.js

Next.js triggers the onClick event before routing to the href link

Scenario In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables. Objective I aim to trigger the onClick function before navigating to the href location. The Code I'm Using <Link href={`/sess ...

javascriptnext.jsapollo-client

Unable to include links to other HTML pages in my MEAN Stack Application

Recently, I've been diving into tutorials on how to build a Mean stack application. So far, I've successfully created a single-page application. However, when attempting to link multiple HTML pages other than the index.html, I keep encountering i ...

angularjsnode.jsmongodbexpressmean-stack

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Hey guys, I'm struggling with modifying the jquery and html to ensure that when the login button is clicked, the login form pops up instead of displaying another login button. Another issue I am facing is that the login button seems to pop up automati ...

javascriptjqueryhtmlcss

Traversing a series of HTML form elements in order to extract their current values and store them in an object

Suppose we have an HTML structure like this: <nav data-filters class=""> <input type="radio" name="type" value="company" checked>Company <input type="radio" name="type" value="product">Product <input type=" ...

javascriptjqueryhtmlbackbone.jsunderscore.js