css - 如何使用angular js对容器中的复选框进行分组

Question

我真的不确定如何在 Angular js 中对复选框进行分组，它给出的外观如此处所附的引用图像所示。我只能显示复选框列表，但不能如下所示。

谢谢

Answer 1

如果您使用 ng-repeat 生成它们，您可以尝试使用 ng-class-odd 来为您的复选框显示不同的样式。您应该研究 CSS，但我已经尝试使用这个示例:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.checkboxes = [
    {"name":"Dehi","value":false},
    {"name":"Kolkata","value":false},
    {"name":"Munbai","value":false},
    {"name":"Pune","value":false},
    {"name":"Chennai","value":false},
    {"name":"Kochi","value":false}
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
  .column {
    float: left;
    width: 50%;
  }
  .row {
    width: 200px;
    background-color: #DDD;
  }
</style>

<div ng-app="myApp" ng-controller="myCtrl">

  <div class="row">
    <div ng-repeat="x in checkboxes" ng-class-odd="'column'">
      <input type="checkbox" ng-model="x.value">{{x.name}}
    </div>
  </div>

</div>