Question

我有一个带有标签的图标列表。我想将我的图标组织成一个移动应用程序的主屏幕，它们在网格中显示出来。

现在我的图标是这样的：

我希望他们是这样的，有两个组合固定和记录：

这是我的代码：

  <div class="box">
        <div class="box-body" ng-repeat="x in records" align="center" >
            <a class="btn btn-app">
                <span class="badge bg-yellow">3</span>
                <i class="fa fa-flask"></i> {{x}}
            </a>
        </div>

    </div>

我的控制器：

 $scope.records = [
                        "PIA/A",
                        "PIA/C1-Shiftlabo",
                        "PIA/U-MDI",
                        "PIA/V1",
                        "SAP-Lab",
                        "SAP-Lab2",
                        "SAP-Lab3",
                        "SAP-Lab4",
                        "SAP-Lab5",
                ]

Answer 1

您可以通过在“col-XX-6”div或元素上添加ng-repeat来实现。看看下面的例子。

如果您有效地使用bootstraps网格系统，那就很简单了。

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.items = [
   {"Name" : "Emails", "Count": 2},
   {"Name" : "Chats", "Count": 4},
   {"Name" : "Messages", "Count": 4},
   {"Name" : "Loads", "Count": 6},
   {"Name" : "Cards", "Count": 3},
   {"Name" : "Points", "Count": 8},]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body ng-app="app" ng-controller="ctrl">
  <div class="container-fluid">
    <div class="row">
        <div class="col-sm-6" style="margin-bottom: 5px;" ng-repeat="item in items">
         <span class="btn btn-primary">
          <span class="glyphicon glyphicon-asterisk" aria-hidden="true">
            {{item.Name}}: <span class="badge">{{item.Count}}</span>
          </span>          
         </span>
        </div>
    </div>
    <h3>If you want 3 columns.</h3>
    <div class="row">
        <div class="col-sm-4" style="margin-bottom: 5px;" ng-repeat="item in items">
         <span class="btn btn-primary">
          <span class="glyphicon glyphicon-asterisk" aria-hidden="true">
            {{item.Name}}: <span class="badge">{{item.Count}}</span>
          </span>          
         </span>
        </div>
    </div>
  </div>
</body>

如何在循环中组织我的图标

1 个答案: