javascript - html和Angular中动态Checkbox的排列

Question

我在 html 页面中有一个动态复选框。这些复选框中的值是使用 Angular 获取的。这是我的 html 文件:

<h2 class="sub-header" style="color:#4e67c3;"> Scegli gli ingredienti </h2>  


             <form ng-submit="submitRtIngredient()">  

                <table>  

                    <tr >  
                        <th colspan="4" class="th2">Scegli gli ingredienti</th>  
                     </tr>  
                    <tr ng-repeat="ingredient in ingredients">  
                       
                        <td><!-- <select type="checkbox" ng-model="rtingredientForm.ingredient.idingredient"   /> -->
                        
                            <input type="checkbox" ng-model="ingredient.isingredient"> {{ ingredient.name }}<br>

                        </td> 
                             
                    </tr>  





                    <tr>  
                        <td colspan="4" ><input  style="width:200px" onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" type="submit" value="Invia" class="blue-button" /></td>  
                    </tr>   
                </table>  
            </form>


     
   
              
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
    <script src="scripts/rest-services.js"></script>
    <script src="scripts/main-admin.js"></script>
 
    <script src="scripts/jquery.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="scripts/angular.js"></script>

    <script type="application/javascript"></script>

这是我的页面的 View :

我的 Controller :

app.controller("RtIngredientProductController", function($scope, $filter, $location, $routeParams, $http, restService) {  
    $scope.idprodesc=$routeParams.id;
    
     $scope.rtingredientForm = { 
        ingredient: {
                   idingredient: -1
                 },
        productDesc: {
                   idproductDesc: -1
                 }
    }; 
    
    $scope.ingredient = { 
        idingredient: -1,
        isingredient: false,
        name: ""
    }; 
    
    restService.listingredient(_getlist, _error)
    
    
    function _getlist(response){
                    if (response.data == ""){
                        console.log("Accesso non autorizzato")
                    }

                        $scope.ingredients = response.data;  
                        console.log(response.data);
    }
    
    $scope.submitRtIngredient = function() {
        
        console.log($scope.ingredients[0].isingredient);
        console.log($scope.idprodesc);
        
        for (var i=0; i<$scope.ingredients.length; i++)
            if($scope.ingredients[i].isingredient){
                $scope.rtingredientForm.ingredient.idingredient = $scope.ingredients[i].idingredient;
                $scope.rtingredientForm.productDesc.idproductDesc = $scope.idprodesc;
                console.log($scope.rtingredientForm);
                restService.insertrtingredient($scope.rtingredientForm, _error)   
            }
    }
    
    function _error(response) {  
                    console.log("qualcosa è andata male");
                    console.log(response.statusText);  
    }  
             
}); 

该复选框是动态的，取自数据库。问题是我想将这些复选框排列在 5 列中，如下所示: 这样，当在我的数据库中添加更多这些字段时，在我看来，我将所有这些字段排列为五列和 n 行。我该怎么做？

Answer 1

将选项拆分成行并使用 ng-repeat 显示这些选项。

JS

$scope.b = [1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.rows = [];

for (var i=0; i < $scope.b.length; i+= 5) {
  console.log(i)
  $scope.rows.push($scope.b.slice(i, i+5))
}

HTML

<table>
  <colgroup>
    <col span="5">
  </colgroup>
  <tr ng-repeat="row in rows">
    <td ng-repeat="item in row">
      <input type="checkbox">Option {{item}}
    </td>
  </tr>
</table>