Question

我想将 x ， y 的值从数组（item.x，item.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>

-controller -

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

$scope.items = [

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

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

这是我无法实现的目标 - 我希望通过点击section子元素来更新父元素的figure）样式属性，以便点击项目居中（因此item.y * -1）。变量确实更新了，风格没有。

PLUNKR

有没有办法让transformX指令中的transformY和ng-style变量实际工作并动态更新？这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标记中的一个级别。

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

1 个答案: