在一行中打印多个 ng-repeat 元素

Question

我有一个项目列表，并且 ng-repeat 在页面中显示它们。下面是简化的结构 -

[   
  {
    "id": "elem-1",
    "position": {
      "row": 1,
      "column": 1
     }   
  },
  {
    "id": "elem-2",
    "position": {
      "row": 2,
      "column": 1
     }   
  },
  {
    "id": "elem-3",
    "position": {
      "row": 2,
      "column": 2
     }   
  }    
]

现在 elem-1 应该排在第一行，而第二行应该并排显示 elem-2 和 elem-3。我检查了 ng-repeat-start 并浏览了 Stack overflow 中现有的类似主题，但不确定如何执行此操作。这是我的 HTML 模板

<div layout="row" ng-repeat="item in inputElemAll">
    <div ng-if="if the current row has 1 column">
        <md-input-container class="md-block">
            <!-- Print the element-->
        </md-input-container>
    </div>
    <div ng-if="if current row has more than 1 column">
        <md-input-container class="md-block" flex="33">
            <!-- Print the element-->
        </md-input-container>
    </div>
</div>

我在这里尝试的只是添加一个 flex 属性，以防我必须在一行中显示更多列。但问题是，每次 ng-repeat 都会启动一个新的

with "row" 布局，我被困在这里。不确定如何访问多个 ng-repeat 元素以及如何同时在同一个

上。

P.S。如果你有兴趣，我使用 material layout。

Answer 1

我假设您想像 table 一样显示数组，并且最大 rows/columns 不大于数组的长度。您必须使用 ng-repeat 的两个循环，第一个循环用于所有行，第二个循环用于列。也用'orderBy'排序。我混合了你的 json 数组，结果符合预期：

 <div layout="row" ng-repeat="row in inputElemAll">
      <div ng-repeat="item in inputElemAll | orderBy:'position.column'">
        <div ng-if="$parent.$index==item.position.row-1">
              <md-input-container class="md-block">
                  {{item.id}}
              </md-input-container>
        </div>
    </div>  
  </div>

检查这个 jsFiddle 工作示例： http://jsfiddle.net/hd1by95r/47/

在一行中打印多个 ng-repeat 元素

Printing multiple ng-repeat elements in a single row

ng-repeat