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溢出中现有的类似主题，但不知道如何执行此操作。这是我的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重复一次新的＆lt; div＆gt; “行”布局开始，我被困在这里。不确定如何访问多个ng-repeat元素，并且也是相同的＆lt; div＆gt;同时。

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/

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

1 个答案: