Question

好的，这就是我要做的事情： - 我正在构建一个投资组合滑块，显示我所有项目的图像。 - 每个项目都有多个图像，我想在自己的幻灯片上显示。 - 例如，在您浏览项目1的图像（每个都在他们自己的幻灯片上）之后，下一张幻灯片将从项目2的第一张图像开始，依此类推。 - 我可以做很多事情，但我试图将我的项目分组到他们自己的对象中，包括他们的名字，它所用的客户端以及与该项目相关的图像。 - 我的最终目标是拥有一个有组织的对象，但所有图像都是一个接一个地收集并显示在滑块中。当显示一个新项目的图像时，我也想知道我所在的项目对象，这样我就可以获得项目名称，索引和客户端，以便我可以在页面上更改信息。 - 我希望这不会太混乱。

这是我现在拥有的对象

JS：

mainApp.controller("mainController", function($scope) {
    $scope.portfolio = [
        {name:'Portfolio 1', image:['images/test_1a.png','images/test_1b.png','images/test_1c.png'], client:'Client 1'},
        {name:'Portfolio 2', image:['images/test_2a.png','images/test_2b.png'], client:'Client 2'},
        {name:'Portfolio 3', image:['images/test_3a.png','images/test_3b.png','images/test_3c.png'], client:'Client 3'}
    ];
});

当我遇到困难时，这就是我开始尝试的。显然，这不是我需要的，但它让你看到我想去的地方。

HTML：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- slide -->
        <div ng-repeat="work in portfolio">
            <div class="swiper-slide" ng-repeat="img in work.image">
                <!-- image -->
                <img class="full_width" src="{{ img }}" alt="">
            </div>
        </div>
    </div>
</div>

任何和所有帮助它超级赞赏！

Answer 1

你快到了..你的问题是使用src而不是ng-src。

尝试：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- slide -->
        <div ng-repeat="work in portfolio">
            <div class="swiper-slide" ng-repeat="img in work.image">
                <!-- image -->
                <img class="full_width" ng-src="{{ img }}" alt="">
            </div>
        </div>
    </div>
</div>

ng-repeat - 试图找出建立我正在尝试做的事情的最佳方法

1 个答案: