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