拆分用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来实现。

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

注意：我正在使用bootstrap 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。

感谢。