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

我有一个对象看起来像：

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结构）。因此：

... 等等

但当我查看angular文档时，我似乎需要：

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

但这会创建嵌套的div。有没有办法创建一个像我上面详述的那样的扁平div结构

注意：假设数据结构保持原样（我无法创建对象的平面列表）

---

^^^^^^

如果您想要一个平面列表，请在绑定到作用域之前在控制器中将其展开。平展列表不应该发生在您的视图中。

是的，您已经有了一个ng repeat，它在数组中遍历javscript对象。访问这些对象属性。看看这一行

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

---

由于无法更改数据的形状，因此必须假定数据具有某些属性，例如每个内部数组始终包含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>

---

简短回答：事实上，没有嵌套的div，你就无法做到这一点

为此，必须修改阵列，在控制器上展平阵列，然后绑定到展平阵列。 这是一个正在工作的plunker：

您的HTML应该如下所示：

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

如果您试图在指令的模板上使用

ng repeat

，angular将尝试使用上限范围，因为

replace:true

，因此您必须以艰难的方式完成

---

希望这有帮助

我不认为这会起作用，因为第二级本身就是一个数组，所以让我们加入一个ng init并展平该数组。你正在制作一个平面div结构，为什么数组不是平面的？问题是我是否可以将一个二维数组绑定到平面div结构。看我在问题中的笔记哦，你可以用一个指令，给我一分钟时间，我可以建立一个例子。我不知道这个问题出了什么问题，它甚至没有意义。您希望ng repeat进入第一个对象数组，但在ng repeat的一次迭代中，对每个对象数组重复X次。嵌套它们有什么问题，展平数组又有什么问题？使用指令更新了我的答案，这样你就可以得到所需的htmlif。如果这些索引不能自动计算，那么你对此不感兴趣。。但有趣的回答我想我唯一的问题是如果数组中的其中一个值（例如一个x值）发生了变化，那么在幕后整个html都被替换了？这是行不通的，正如我所说的，最好的情况是如果你能展平数组，这样绑定就会完美地工作，考虑做这只是为了显示目的。“费迪金，我有一个问题，你在哪里学会如何使用指令？”它们似乎是angular.js中唯一我不理解的东西。基于你的答案和被问问题之间的时间差，你似乎能够很快地与他们合作。关于指令的一些东西对我来说是很吓人的。J水果挞嗨，我不认为我自己对指令很精通，但我开始从这里学习：（先检查旧视频）然后再上一些课程（免费试用）。还有很多谷歌搜索：）

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

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);
    }
  }
}]);