我在html頁面中有一個動態複選框。這些複選框中的值是使用角度獲取的。這是我的html文件:在html和angular中動態複選框的排列
<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行。 我該怎麼辦?
您的代碼段不能正常工作,但你可能想顯示在線。 –