Question

我想把我的井列表安排在两个不同的栏目中。我附上了我的plunker链接https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview。

这是我的观点

  <div class="well well-lg" ng-repeat="(key, data) in myData.config.A" style="width:500px;">{{key}}</div>
        </div>

这是我的控制器

$scope.myData={
  "_id": "ui",
  "config": {
    "A": {
      "aaaa": {
        "required": true,
        "editable": true
      },
      "bbbbb": {
        "required": true,
        "editable": true
      },
      "ccccc": {
        "required": true,
        "editable": false
      },
      "ddddd": {
        "required": true,
        "editable": true
      },
      "eeeee": {
        "required": true,
        "editable": true
      },
      "fffff": {
        "required": true,
        "editable": true
      }
    }
  }
}  
});

我想在一列中使用aaaa，bbbb，cccc，在另一列中使用ddddd，eeee，fffff。如何安排这些？

Answer 1

通过使用Boostrap的网格系统row.column，我可以想到这样做。

ng-repeat跟踪$index。从那里，您可以使用ng-show指定要有选择地显示哪些数据。这样您就可以将它显示在两列中。

以下是plunker链接：

Updated Plunker.

注意：如果要自定义自己的列，可以使用除引导网格系统之外的其他内容。

Answer 2

如果您想要2列，请使用迭代元素的col-xs-6属性中的col-sm-6，col-md-6，col-lg-6或class类之一

像这样：

<div class="well well-lg col-xs-6" ng-repeat="(key, data) in myData.config.A" style="width:500px;">{{key}}</div>

但是你不能按照自己的意愿对它们进行排序，因为对象中的键/值条目没有排序，当你使用键+值ng-repeat进行迭代时，你可以＆＃39;确保订单，即使您认为可以，JavaScript引擎的不同实现可能会以不同方式迭代它们。如果您希望按照您的描述对它们进行排序，最简单的方法是使用数组并根据需要对它们进行排序/随机排序。

喜欢：['aaaa', 'ddddd', 'bbbb' .......]

<div class="well well-lg col-xs-6" ng-repeat="data in myData" style="width:500px;">{{data }}</div>

如何在两个不同的列中安装引导井？

2 个答案: