Расположение динамического флажка в html и угловом

Question

У меня есть динамический флажок на странице html. Значения в этом флажке берутся с использованием угловых значений. Это мой 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>

Это мнение моей страницы:

Мой контроллер:

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>