0

I want to pass on the value of x, y from the array (item.x, item.y) to the ng-style of the parent element by updating the variables transformX, transformY (the updating is achieved by ng-click directive).

-html-

<section ng-style="{'transform' : translate(transformX,transformY)}">
  <figure ng-repeat="item in items" 
          style="left: {{item.x}}px; top: {{item.y}}px;"
          ng-click="$parent.transformX = item.x * -1; 
                    $parent.transformY = item.y * -1;">
    {{item.title}}
  </figure>
</section>

-controller-

$scope.transformX = 0;
$scope.transformY = 0;

$scope.items = [

  { title: "foo",
    x: 50,
    y: -20
  }

  ,{ title: "bar",
    x: -40,
    y: 10
  }
];

This is what I can't achieve - I want the parent element's (section) style attribute to update with the click on the figure child element so that the clicked item is centered (hence item.y * -1). The variable does update, the style doesn't.

PLUNKR

Is there any way to make transformXand transformY variables inside ng-style directive to actually work and dynamically update? This ng-style="{'transform' : translate(transformX,transformY)}" doesn't work..

Jan Kielczewski
  • 1
  • 2

1 Answers1

0

The way you have it, it would just end up with the very last item.x and item.y variables. So if this is your goal you could just do this 

    transformX = items[items.length - 1].x

and

    transformY = items[items.length - 1].y

This is because there is only ever going to be one section element in the html. If you want the transform variables to have each of the x and y variables you need to put the ng-repeat up a level in the section tag.

Jacob Finamore
  • 797
  • 5
  • 19