0

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

索引.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>

脚本.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）

4

2 回答 2

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 ;
    });
于 2014-07-22T10:21:44.450 回答
1

Sylwester 为您提供了一个解决方案，但如果您想保留您使用过的“Controller as”语法，您的所有范围变量都可以通过“portfolioGraphics”访问，所以请尝试

<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>
于 2014-07-22T10:29:04.137 回答