Dynamic ng-init variable - Angularjs

Question

.coffee

@FooCtrl = ->
  $scope.products = Product.query()

.html

<div ng-repeat='product in products'>
  <div ng-init='images_{{product.id}} = product.images' >
    <div class='slideshow' ng-repeat='pic in images_{{product.id}}'>
       <img ng-src='{{pic.url}}' />
    </div>
</div>

I wanna do like this.But ng-init='images_{{product.id}}' is throwing some exception.Any remedy or alternate solution for this?

Answer 1

The way you are doing may not work as ng-init take standard Javascript expression so {{}} would not work.

Since javascript objects are just a key-value collection. You need to access dynamic properties using [] notation instead on . notation.

So this

<div ng-init='images_{{product.id}} = product.images >

becomes

<div ng-init='this["images_"+this.product.id] = product.images'>

See this fiddle i created