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

Question

我有一个item和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，并且还经历了堆栈溢出中的现有类似主题，但不知道如何执行此操作。这是我的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-重复一个新的<div>与“行”布局开始，我卡在这里。不确定如何访问多个ng-repeat元素，并且同时处于同一个<div>。

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

Answer 1

我假设你想显示你的数组像表和最大行/列不大于你的数组长度。你必须用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/