Question

我想知道AngularJs是否可以通过使用另一个scrop变量作为索引来渲染数组元素： {{阵列[{{索引}}]}}

例如，我正在尝试实现此目的（请注意嵌套的{{}}）：

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

prodataSelect和imagesUrls都在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');
})

数组imagesUrls如下：

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

由于

Answer 1

是的，你可以。尝试删除大括号@ item，也可以删除.png或在检索到的图像名称后添加它？

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

到

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

为了向您展示可以查看我放在一起的这个快速示例

plunkr

Angular，标记绑定变量作为另一个变量的索引

1 个答案: