简体   繁体   中英

AngularJS ng-repeat array index iteration

I'm building a Cordova app for Android, and I have an array of entries that I am displaying in a list of cards using Ionic.

This is how I display them:

    <!-- // List of Cards // -->
    <div class="list card" ng-repeat="entry in entryDB">

      <!-- // Card Title // -->
      <div class="item item-divider">{{entry[1].link}}</div>
      <!-- // Card Contents // -->
      <div class="item item-body" ng-click="browse(entry[1].link)">
        <h2><b>{{entry[1].title}}</b></h2>
        <p>{{entry[1].contentSnippet}}</p>
        <p><a class="subdued">{{entry[1].publishedDate}}</a></p>
      </div>

    </div>

How can I update the index value for entry[index] for each object in the array, so that a new row is created in the list for each object in the array?

I have tried using a 'track by $index', but that did not work.

Also by the way I have tried using the standard way of showing the entires, but this is the only way it displays each entry separately by using a [index] to display each entry, if I remove this, it only creates one list item that contains the entire array.

I'm new to AngularJS and I've been tearing my hair out over this issue, I can imagine it's something super simple that I'm missing.

Since entryDB is an array of arrays, in your ng-repeat entry is still an array that needs to be looped through and track by $index referencing $index will not get you what you're looking for inside of entry. If you want all of the items inside entry to display then you need a nested ng-repeat to access those items. Instead of :

<div class="list card" ng-repeat="entry in entryDB">

do :

<div ng-repeat="entry in entryDB"> 
    <div class="list card" ng-repeat="item in entry">
        <!-- // Card Title // -->
        <div class="item item-divider">{{item.link}}</div>
        <!-- // Card Contents // -->
        <div class="item item-body" ng-click="browse(item.link)">
            <h2><b>{{item.title}}</b></h2>
            <p>{{item.contentSnippet}}</p>
           <p><a class="subdued">{{item.publishedDate}}</a></p>
        </div>
    </div>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM