将使用ng-repeat填充到列中的复选框分开？

Question

这里是我的html：

<div class="checkbox"> 
    <label> 
     <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All 
    </label> 
</div> 
<div class="checkbox" ng-repeat="carType in carTypeObj"> 
    <label> 
     <input type="checkbox" ng-model="carType.selected" /> {{carType.type}} 
    </label> 
</div> 

这里是我的控制器：

carApp.controller("TableBodyCtrl", function($scope, $http){ 
    $scope.selectedAll = {"value":true}; 
    $scope.carTypeObj = [{"type":"hatchback"},{"type":"suv"}...]; 

这是我在Chrome输出：

这里是我所需要的输出：

因为我使用AngularJS ng-repeat填充我的复选框，所以应该使用AngularJS来实现。

那么实现它的恰当方法是什么？

注：我使用的引导3.2

Answer 1

也许你可以用纯CSS做到这一点：

添加到您的css文件：

div.checkbox > label{ 
    display:inline-block; 
    width:150px; 
} 

并为您的HTML

<div class="checkbox"> 
    <label> 
     <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All 
    </label> 
    <label ng-repeat="carType in carTypeObj"> 
     <input type="checkbox" ng-model="carType.selected" /> {{carType.type}} 
    </label> 
</div> 

Answer 2

使用BootStrap的checkbox-inline类如下。

<label class="checkbox-inline" ng-repeat="carType in carTypeObj"> 
     <input type="checkbox" ng-model="carType.selected" /> {{carType.type}} 
    </label> 

现在基于屏幕宽度，复选框将相应地调整。

这是一个工作fiddle。

谢谢。