Question

我正在尝试显示保存在工厂中的图片。这是我的工厂：

[
    {
        id: 01,
        title: 'Kabinet in hoger beroep tegen klimaatvonnis',
        text: '...',
        date: '31 oktober, 2015',
        image: 'post1.jpg',
        introtext: '...'
    },
    {
        id: 02,
        title: 'Leraren kritisch over passend onderwijs',
        text: '...',
        date: '05 mei, 2014',
        image: 'post2.jpg',
        image: 'post6.jpg',
        introtext: '...'
    },
    {
        id: 03,
        title: 'Premier Curaçao dient ontslag in',
        text: '...',
        date: '14 april, 2015',
        image: 'post3.jpg',
        image: 'post8.jpg',
        introtext: '...'
    },
    {
        id: 04,
        title: 'Asscher heeft nog geen akkoord met Marokko over uitkeringen',
        text: '...',
        date: '25 januari, 2015',
        image: 'post4.jpg',
        introtext: '...'
    }

这里我要显示它：

  <div class="container">
    <div class="page-header">
        <h1 ng-style="title">{{ currentNieuwsbericht.title }}<br>
        <small>{{ currentNieuwsbericht.date }}</small>
        </h1><br>
        <h2>
            <small style="font-size:24px !important; color: #777;">
                {{ currentNieuwsbericht.introtext }}
            </small>
        </h2>
    </div>
    <p ng-style="text" id="mainText">{{ currentNieuwsbericht.text }}</p>
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <a class="thumbnail" ng-repeat="images in currentNieuwsbericht">
                <img src="/src/assets/images/{{currentNieuwsbericht.image}}">
            </a>
        </div>
    </div>
</div>

我知道你现在在我的代码中看到的ng-repeat不起作用，但我想要这样的东西，因为不是每个帖子都有更多的图片。我希望你能理解我的问题，如果你不只是问你需要知道什么我已经在这一整天都在苦苦挣扎。

Answer 1

您正在执行的操作只会覆盖属性image值。

使image成为数组

{
    id: 02,
    title: 'Leraren kritisch over passend onderwijs',
    text: '...',
    date: '05 mei, 2014',
    image: ['post2.jpg','post6.jpg'],
    introtext: '...'
}

因此，在您的JS中，您可以轻松地迭代image

<img ng-repeat='img in images.image' src="/src/assets/images/{{img}}">

PS：请使用正确的命名约定。 ng-repeat应该像：

ng-repeat="currentImage in images"

Answer 2

如果JSON具有重复的键名，则不会收到错误。但是，当您尝试获取该值时，您将获得最后一个属性的值。您应该将数据结构更改为images: ['img1.jpg', 'img2.jpg'] ant let ngRepeat迭代该数据结构。

我可以在一个对象中使用ng-repeat吗？

2 个答案: