I have a form, after filling the data in it, I am send it to server through http post method in angularjs, the issue is, it is reading/getting all values except value in the select box, it is reading/getting as null value.
我有一个表单，在填充数据后，我通过angularjs中的http post方法将它发送到服务器，问题是，它是读取/获取除了选择框中的值以外的所有值，它是读取/获取为null值。
<!DOCTYPE html>
<html>
<head>
<title>KunEra ERP</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Booststrap compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- customized stylesheet -->
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body ng-app="myapp">
<jsp:include page="menubar.jsp" />
<!-- Product Id Table -->
<div class="container-fluid" ng-controller="postserviceCtrl">
<form ng-submit="postdata(proid, pname, pselect, pbrand, pcolor, pquanity, pprice, psize, pgst, pdealer, paddress)" name="myForm" method="post" class="form-horizontal center-block" id="product-table">
<fieldset>
<legend>Product</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="product-id">Product ID:</label>
<div class="col-sm-10">
<input type="text" ng-model="proid" class="form-control" name="product-id" id="product-id" placeholder="Product ID" required pattern="[A-Za-z0-9]{4,20}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-name">Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="pname" class="form-control" name="product-name" id="product-name" placeholder="Product Name" required pattern="[A-Za-z]{4,20}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-category">Category:</label>
<div class="col-sm-10" required>
<select required class="form-control" name="product-category" id="product-category">
<option ng-model="pselect">Select</option>
<option ng-model="pselect">Shirts</option>
<option ng-model="pselect">Trousers</option>
<option ng-model="pselect">Jackets</option>
<option ng-model="pselect">T-Shirts</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-brand">Brand:</label>
<div class="col-sm-10">
<input type="text" ng-model="pbrand" class="form-control" name="product-brand" id="product-brand" placeholder="Brand" required pattern="[A-Za-z]{4,20}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-color">Color:</label>
<div class="col-sm-10">
<input type="text" ng-model="pcolor" class="form-control" name="product-color" id="product-color" placeholder="color" required pattern="[A-Za-z]{4,10}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-quanity">Quanity:</label>
<div class="col-sm-10">
<input type="number" ng-model="pquanity" class="form-control" name="product-quanity" id="product-quanity" placeholder="Quanity" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-price">Price:</label>
<div class="col-sm-10">
<input type="number" ng-model="pprice" class="form-control" name="product-price" id="product-price" placeholder="Price" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-size">Size:</label>
<div class="col-sm-10">
<input type="number" ng-model="psize" class="form-control" name="product-size" id="product-size" placeholder="size" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-gst">GST:</label>
<div class="col-sm-10">
<input type="number" ng-model="pgst" class="form-control" name="product-gst" id="product-gst" placeholder="GST" required >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-dealer">Dealer Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="pdealer" class="form-control" name="product-dealer" id="product-dealer" placeholder="Dealer Name" required pattern="[A-Za-z]{4,20}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="product-address">Address:</label>
<div class="col-sm-10">
<textarea class="form-control" ng-model="paddress" name="product-address" id="product-address" placeholder="Address" required minlength="20" maxlength="100">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">ADD</button>
<button type="reset" class="btn btn-danger">RESET</button>
</div>
</div>
</fieldset>
</form>
</div>
<jsp:include page="footer.jsp" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- customized javascript -->
<script src="../js/javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('postserviceCtrl', function ($scope, $http) {
$scope.proid = null;
$scope.pname = null;
$scope.pselect = null;
$scope.pbrand = null;
$scope.pcolor = null;
$scope.pquanity = null;
$scope.pprice = null;
$scope.psize = null;
$scope.pgst = null;
$scope.pdealer = null;
$scope.paddress = null;
$scope.postdata = function (proid, pname, pselect, pbrand, pcolor, pquanity, pprice, psize, pgst, pdealer, paddress) {
var data = {
proid: proid,
pname: pname,
pselect: pselect,
pbrand: pbrand,
pcolor: pcolor,
pquanity: pquanity,
pprice: pprice,
psize: psize,
pgst: pgst,
pdealer: pdealer,
paddress: paddress
};
//Call the services
$http.post('https://reqres.in/api/users', JSON.stringify(data)).then(function (response) {
if (response.data){
alert("success");
console.log(response);}
}, function (response) {
alert("error");
});
};
});
</script>
</body>
</html>I also tried inserting ng-mobel in select tag and removed in options but no result.
我也尝试在选择标签中插入ng-mobel并在选项中删除但没有结果。
1 个解决方案
#1
0
ng-model have to be added to the select, not to the option.
必须将ng-model添加到选择中，而不是选项。
Additionaly I would suggest you to display selects by using ng-options directive:
另外我建议你使用ng-options指令显示选择：
HTML:
HTML：
<select ng-options="item for item in selectValues" ng-model="pselect" required class="form-control" name="product-category" id="product-category"></select>
AngularJS:
AngularJS：
$scope.selectValues = ["Shirts", "Trousers", "Jackets", "Tshirts"];
#1
0
ng-model have to be added to the select, not to the option.
必须将ng-model添加到选择中，而不是选项。
Additionaly I would suggest you to display selects by using ng-options directive:
另外我建议你使用ng-options指令显示选择：
HTML:
HTML：
<select ng-options="item for item in selectValues" ng-model="pselect" required class="form-control" name="product-category" id="product-category"></select>
AngularJS:
AngularJS：
$scope.selectValues = ["Shirts", "Trousers", "Jackets", "Tshirts"];