列中的复选框ng-repeat格式

Question

我希望能够在从ng-repeat创建复选框的列中对齐多个复选框。

这是一个带有示例代码的plunker，但没有按我的意愿行事。理想情况下，我希望将一个变量用于列数

这是一个没有ng-repeat

的StackOverflow Example示例

示例代码

a:4:{s:4:"Name";s:8:"John Doe";s:7:"Address";a:4:{s:6:"Street";s:11:"123 Main St";s:4:"City";s:5:"Dover";s:5:"State";s:2:"DE";s:3:"Zip";s:5:"19904";}s:5:"Phone";s:12:"555-555-1234";s:5:"Email";s:16:"john@example.com";}
a:4:{s:4:"Name";s:8:"Jane Doe";s:7:"Address";a:4:{s:6:"Street";s:11:"123 Main St";s:4:"City";s:5:"Dover";s:5:"State";s:2:"DE";s:3:"Zip";s:5:"19904";}s:5:"Phone";s:12:"555-555-5678";s:5:"Email";s:16:"jane@example.com";}
a:4:{s:4:"Name";s:15:"Jonny Appleseed";s:7:"Address";a:4:{s:6:"Street";s:15:"1 Infinite Loop";s:4:"City";s:10:"Coopertino";s:5:"State";s:2:"CA";s:3:"Zip";s:5:"90201";}s:5:"Phone";s:12:"555-555-9101";s:5:"Email";s:15:"jonny@apple.com";}
a:4:{s:4:"Name";s:12:"Jack Sparrow";s:7:"Address";a:4:{s:6:"Street";s:15:"The Black Pearl";s:4:"City";s:17:"Cut Throat Island";s:5:"State";s:7:"Tortuga";s:3:"Zip";s:5:"00001";}s:5:"Phone";s:12:"555-555-1213";s:5:"Email";s:14:"jack@savvy.com";}
a:4:{s:4:"Name";s:14:"Luke Skywalker";s:7:"Address";a:4:{s:6:"Street";s:15:"17 Jedi Council";s:4:"City";s:8:"Corasant";s:5:"State";s:2:"XX";s:3:"Zip";s:5:"99999";}s:5:"Phone";s:12:"555-555-1415";s:5:"Email";s:17:"luke@theforce.com";}

  $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  // selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];

});

Answer 1

您可以使用bootstrap对齐！检查索引并划分行元素

这是代码，

<强> HTML：

<div   ng-controller="GrokController"   class="container">
    <div ng-repeat="radius in radii" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4"><input type="checkbox"  
               ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>
        <div class="col-xs-4"><input type="checkbox"  
               ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>
        <div class="col-xs-4"><input type="checkbox"  
               ng-model="radii[$index].name">&nbsp;<span>{{radii[$index  ].id}}</span></div>
    </div>
</div>

<强>控制器：

app.controller('GrokController', ['$scope', function($scope) {
       $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

}]);

工作App