Question

我试图设置一个简单的ng-repeat，但它不起作用。我包含angularJS，然后是两个角度模块（ngTouch和ngAnimate，因为我需要它们用于其他目的）并且我包含了我的Angular脚本文件。我将ng-repeat设置在一个包含图片src的简单元素和href的链接中，该链接应从JSON angular对象中获取脚本文件。但ng-repeat已转换为HTML评论。

的index.html：

<div class="container-mini" data-ng-controller="graphicsController as portfolioGraphics">
    <div class="content coming-soon lang"></div>
    Flyers, posters, personal art, etc <br />
    <a data-ng-repeat="graphic in graphics" class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title">
        <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" />
    </a>
    <a class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title">
        <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" />
    </a>
</div>

的script.js：

app.controller('GraphicsController', function() {
    this.items = graphics;
});

var graphics = [
    {
        href: "brand-delices-carte.jpg",
        src: "brand-delices-carte.jpg",
    },
    {
        href: "brand-delices-flyer.jpg",
        src: "brand-delices-flyer.jpg",
    },
    {
        href: "brand-delices-carte.jpg",
        src: "brand-delices-carte.jpg",
    }
];

谢谢=）

修改：我的ngRepeat链接后的链接仅用于测试目的（如果它在没有ngRepeat的普通链接中工作）

Answer 1

请参见此处：http://plnkr.co/edit/5EJobuBS9DBvVSoPffQy?p=preview

HTML：

<div class="container-mini" data-ng-controller="GraphicsController">
    <div class="content coming-soon lang"></div>
    Flyers, posters, personal art, etc <br />
    <a data-ng-repeat="graphic in graphics" class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title">
        <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" />
    </a>
    <a class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title">
        <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" />
    </a>
</div>

JS：

app.controller('GraphicsController', function($scope) {


$scope.graphics = [
    {
        href: "brand-delices-carte.jpg",
        src: "brand-delices-carte.jpg",
    },
    {
        href: "brand-delices-flyer.jpg",
        src: "brand-delices-flyer.jpg",
    },
    {
        href: "brand-delices-carte.jpg",
        src: "brand-delices-carte.jpg",
    }
];

});

或

var graphics = [{
  href: "brand-delices-carte.jpg",
  src: "brand-delices-carte.jpg",
}, {
  href: "brand-delices-flyer.jpg",
  src: "brand-delices-flyer.jpg",
}, {
  href: "brand-delices-carte.jpg",
  src: "brand-delices-carte.jpg",
}];


app.controller('GraphicsController', function($scope) {


    $scope.graphics = graphics ;
    });

Answer 2

Sylwester为您提供了一个解决方案，但是如果您想将控制器保持为＆＃39;您已使用所有范围变量的语法可通过＆＃39; portfolioGraphics＆＃39;所以试试

<a data-ng-repeat="graphic in portfolioGraphics.items" class="fancybox-thumb" rel="fancybox-thumb" data-ng-href="img/graphics/{{graphic.href}}" title="my title">
    <img data-ng-src="img/graphics/thumbs/{{graphic.src}}" alt="my alt" />
</a>

在AngularJS中的ng Repeat，ng Src，ng Href和JSON对象之间徘徊

2 个答案: