如何根据变量动态更新 ng-style？

Question

我想将数组 (item.x, item.y) 中 x, y 的值传递给父元素的ng-style更新变量transformX、transformY（通过ng-click指令实现更新）。

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

-控制器-

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

$scope.items = [

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

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

这是我无法实现的 - 我希望通过单击 figure 子元素来更新父元素的 (section) 样式属性，以便单击的项目居中（因此 item.y * -1）。变量会更新，样式不会。

PLUNKR

有什么方法可以使ng-style 指令中的transformX 和transformY 变量真正起作用并动态更新？这个ng-style="{'transform' : translate(transformX,transformY)}" 不起作用..

Answer 1

按照你的方式，它会以最后一个 item.x 和 item.y 变量结束。所以如果这是你的目标，你可以这样做

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

和

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

这是因为 html 中只有一个 section 元素。如果您希望转换变量具有 x 和 y 变量中的每一个，您需要将 ng-repeat 放在 section 标签中。