Stuck between ngRepeat, ngSrc, ngHref and JSON objects in AngularJS

Question

I'm trying to set a simple ng-repeat but it doesn't work. I included angularJS, then two angular modules (ngTouch and ngAnimate because I need them for other purposes) and I included my Angular scripts files. I set the ng-repeat on a simple element that contains the src of an image and href of a link that should be taken from a JSON object from the angular script files. But the ng-repeat is transformed into a HTML comment.

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",
    }
];

Thanks =)

Edit : the link after my ngRepeat link is just for testing purposes (if it would work inside a normal link without ngRepeat)

sylwester · Accepted Answer · 2014-07-22T10:54:13.620

1

please see here: 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",
    }
];

});

or

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 ;
    });

edited Jul 22 '14 at 10:54

answered Jul 22 '14 at 10:21

sylwester

16,498
1
25
33

Hi and thanks for your help. It stills doesn't work. The ngRepeat is transformed into a HTML comment and the test link doesn't interpret what is between the brackets. Means it shows in Chrome console: – LightBen Jul 22 '14 at 10:31
1

For this fix to work you will also need to change data-ng-controller="graphicsController as portfolioGraphics" to just data-ng-controller="graphicsController" or use portfolioGraphics to access your scope variables as mentioned below – glendaviesnz Jul 22 '14 at 10:32
thanks to you both. @sylwester, you forgot capital at the beginning of graphicsController in the HTML part. So if I understood well, either we don't put an alias for the controller and in the ng-repeat we can name it as we want (like here graphics), either if we gave an alias to the controller, it becomes accessible only with the main name followed by a dot and the element we want? (like here portfolioGraphics.items)? – LightBen Jul 22 '14 at 10:44
You have it right - have a look at http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/ for some more detail about difference between $scope and 'Controller as' – glendaviesnz Jul 22 '14 at 10:54
Thanks glendaviesnz. I wanted to give your post a +1 because it's from there I understood the problem with the aliases but because I don't have yet 15 reputation I can't do anything... thanks a lot!! – LightBen Jul 22 '14 at 10:57
@LightBen I can do that for you. – sylwester Jul 22 '14 at 11:01

score 1 · Answer 2 · answered Jul 22 '14 at 10:29

Sylwester gives you one fix, but if you want to keep the 'Controller as' syntax that you have used all of your scope variables are accessible via 'portfolioGraphics' so try

<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>

Stuck between ngRepeat, ngSrc, ngHref and JSON objects in AngularJS

2 Answers2