Angular, markup binding variable as index of another variable

Question

I would like to know if it is possible with AngularJs to render an array element by using another scrop variable as the index like : {{array[{{index}}]}}.

For example I am trying to achieve this (note the nested {{}} ) :

<ion-item collection-repeat="item in prodataSelect" collection-item-height="52">
  <img class="imageoptionsbrand" src={{imagesUrls[{{item.brand | lowercase | nospace}}+'.png']}} />
</ion-item>

Both prodataSelect and imagesUrls are in the scope of the view in controller.js :

angular.module('SnowBoard.controllers', ['SnowBoard.services'])
.controller('ComputeCtrl', function($scope, $ionicPopup, $timeout, sessionService) {
  $scope.prodataSelect = [];
  prodata = sessionService.get('prodata');
  $scope.prodataSelect = prodata;
  $scope.imagesUrls = sessionService.get('imagesUrls');
})

The array imagesUrls is as follows:

 Object {
 byrne.png: "./img/brands/byrne.png"
 byrne.pngtype: "brand"
 owenwright.png: "./img/pros/owenwright.png"
 owenwright.pngtype: "pro"
 BX2.png: "./img/boards/BX2.png"
 BX2.pngtype: "board"
 BlakBox2.jpg: "./img/boards/BlakBox2.jpg"
 BlakBox2.jpgtype: "board"
 CI-girabbit.png: "./img/boards/CI-girabbit.png"
 CI-girabbit.pngtype: "board"
 ...

Thanks

Louis · Accepted Answer · 2015-03-30 13:45:44Z

3

Yes you can. Try removing the curly braces @ item and maybe also remove the .png or add it after the retrieved image name?

 <img class="imageoptionsbrand" ng-src={{imagesUrls[{{item.brand | lowercase | nospace}}]+'.png']}} />

to

  <img class="imageoptionsbrand" ng-src="{{imagesUrls[(item.brand | lowercase | nospace) + '.png']}}"] />

To show you that it is possible check this quick example that I've put together

plunkr

edited Mar 30, 2015 at 13:45

Louis

2,62013 gold badges68 silver badges124 bronze badges

answered Mar 30, 2015 at 10:50

rmuller

1,83712 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Louis Over a year ago

Hi @muller, thanks a lot. But the problem is that ".png" is included in the imagesUrls array so I have to pass it by any means. Do you see a solution ?

Collectives™ on Stack Overflow

Angular, markup binding variable as index of another variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related