Question

我有一个看起来像的对象：

var obj = [ 
[{x:3,y:3},{x:6,y:1},{x:3,y:5}],
[{x:1,y:3},{x:6,y:1},{x:3,y:5}],
[{x:3,y:3},{x:6,y:1},{x:3,y:5}]
]

现在我想把它绑在角上。但在页面上我只是希望它看起来像一堆div（但没有嵌套的div结构）。所以：

<div style='position:absolute; left:3px;top:3px'></div>
<div style='position:absolute; left:6px;top:1px'></div>
<div style='position:absolute; left:3px;top:5px'></div>
<div style='position:absolute; left:1px;top:3px'></div>
... and so on

但是，当我查看角度文档时，我看起来需要这样做：

<div ng-repeat="row in obj">
   <div ng-repeat="col in row">
   </div>
</div>

但这会创建嵌套的div。有没有办法创建像上面详述的平面div结构？

注意：假设数据结构是原样的（我不能创建一个平面的对象列表）
^^^^^^

Answer 1

简短回答：实际上，如果没有嵌套你的div，你就不能这样做

为此，您必须修改阵列，在控制器上展平它，然后绑定到展平的阵列。这是一个工作的plunker： http://plnkr.co/edit/KPHurN2XBkvwMW22X3MP?p=preview

您的HTML应该是这样的：

<div ng-repeat="item in flattenedObj" style="left:{{item.x}} top: {{item.y}}">X: {{item.x}} | Y: {{item.y}}</div>

请注意，您可以在控制器上应用此展平，但推荐的方法是使用服务，您可能正在通过$http从端点接收此数组，因此请在收到时对待它。

UPDATE 在读取结构后不应更改。

您可以使用指令执行此操作，这是一个工作示例：

http://plnkr.co/edit/Whf5YY8kV0zjEEM8vUAN?p=preview

app.directive('exampleDirective',[function(){
  return{
    restrict: 'E',
    replace: true,
    scope: {
      sub: '='
    },
    template: '<div></div>',
    link:function($scope, elem){
      var resultingHtml = '';

      for(var i=0; i<$scope.sub.length; i++){
        resultingHtml += '<div style="top: '+ $scope.sub[i].y +'px; left: '+ $scope.sub[i].x +'px;">X:' + $scope.sub[i].x + ' Y:' + $scope.sub[i].y + ' </div>';
      }

      elem.replaceWith(resultingHtml);
    }
  }
}]);

如果你试图在指令的模板上使用ng-repeat，那么由于replace: true，angular会尝试使用较高的范围，所以你必须这么做。< / p>

希望有所帮助

Answer 2

如果需要平面列表，请在绑定到范围之前将其展平在控制器中。在您的视图中不应该将列表展平。

Answer 3

是的，你有这个ng-repeat，它遍历数组中的javascript对象。访问这些对象属性。所以检查这一行。

<div ng-repeat="row in obj" style="{{ 'position:absolute; left:' +row.x + 'px;top:' + row.y +'px;'}}"></div>

......或

<div ng-repeat="row in obj" style="position:absolute; left:{{row.x}}px;top:{{row.y}}px;"></div>

Answer 4

由于无法更改数据的形状，因此必须假定它具有某些属性，例如每个内部数组始终包含3个对象。

<div ng-repeat-start="row in obj" style='position:absolute; left:{{row[0].x}}px;top:{{row[0].y}};'></div>
<div style='position:absolute; left:{{row[1].x}}px;top:{{row[1].y}};'></div>
<div ng-repeat-end style='position:absolute; left:{{row[2].x}}px;top:{{row[2].y}};'></div>

嵌套的ng-repeat没有嵌套的div？

4 个答案: