[英]AngularJS form is not binding to $http request
<form novalidate class="form-horizontal"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="text-capitalize"> </div> </div> </div> <div class="panel-body"> <div class="form-group"> <label for="inputUsluga3" class="col-sm-2 control-label">Usluga</label> <div class="col-sm-6"> <select id="inputUsluga3" class="form-control"> <option>Kombi</option> <option>Hotel</option> </select> </div> </div> <div class="form-group"> <label for="inputOdDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Od datuma</label> <div class="col-sm-6"> <input id="inputOdDatum3" type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="Početak perioda" bs-datepicker data-date-format="dd.MM.yyyy" /> </div> </div> <div class="form-group"> <label for="inputDoDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Do datuma</label> <div class="col-sm-6"> <input id="inputDoDatum3" type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Kraj perioda" bs-datepicker data-date-format="dd.MM.yyyy" /> </div> </div> <div class="form-group"> <label for="inputStanica" class="col-sm-2 control-label">Stanica</label> <div class="col-sm-6"> <select id="inputStanica" ng-model="airport" class="form-control"> <option>PUY</option> <option>ZAG</option> <option>SPL</option> <option>DUB</option> </select> </div> </div> </div> <div class="panel-body"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-default" ng-click="getData()">Dohvati podatke</button> </div> </div> </div> </form>
MY Http request looks like this 我的Http请求看起来像这样
$scope.getData = function() {
$http.get("/Services/JoppdService.svc/getKombiImport/" + $scope.fromDate + "/" + $scope.untilDate + "/" + $scope.airport)
.success(function (response) {
$scope.education = response;
});
}
After submiting i have request in console that looks like this 提交后,我在控制台中有这样的请求
http://localhost:8080/Services/JoppdService.svc/getKombiImport/undefined/undefined/undefined http:// localhost:8080 / Services / JoppdService.svc / getKombiImport / undefined / undefined / undefined
dateFrom, dateUntil and airport is not binded. dateFrom,dateUntil和airport不绑定。 Where is problem ? 问题在哪里?
Use ng-submit
, bind the required parameters into an object obj
, like obj.fromDate
, obj.untilDate
, and obj.airport
in the form. 使用ng-submit
,将所需的参数绑定到对象obj
,例如obj.fromDate
, obj.untilDate
和obj.airport
。 Use button type as submit
使用按钮类型作为submit
Your html would transform into, 您的html会变成
<form novalidate class="form-horizontal" ng-submit="getData(obj)">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="text-capitalize">
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputUsluga3" class="col-sm-2 control-label">Usluga</label>
<div class="col-sm-6">
<select id="inputUsluga3" class="form-control">
<option>Kombi</option>
<option>Hotel</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputOdDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Od datuma</label>
<div class="col-sm-6">
<input id="inputOdDatum3" type="text" class="form-control" ng-model="obj.fromDate" data-max-date="{{obj.formDate}}" placeholder="Početak perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputDoDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Do datuma</label>
<div class="col-sm-6">
<input id="inputDoDatum3" type="text" class="form-control" ng-model="obj.untilDate" data-min-date="{{obj.untilDate}}" placeholder="Kraj perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputStanica" class="col-sm-2 control-label">Stanica</label>
<div class="col-sm-6">
<select id="inputStanica" ng-model="obj.airport" class="form-control">
<option>PUY</option>
<option>ZAG</option>
<option>SPL</option>
<option>DUB</option>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Dohvati podatke</button>
</div>
</div>
</div>
</form>
Pass obj
in ng-submit
method getData()
which now looks like, getData(obj)
在ng-submit
方法getData()
传递obj
,现在看起来像getData(obj)
You got to convert the fromDate and untilDate into String. 您必须将fromDate和untilDate转换为String。 Have a look at this . 看看这个 。 Replace convertToString()
below with the solution mentioned in that link. 将下面的convertToString()
替换为该链接中提到的解决方案。
Then in your controller getData()
would look like, 然后在您的控制器中, getData()
看起来像,
$scope.getData = function(obj) {
var fromDate = convertToString(obj.fromDate);
var untilDate = convertToString(obj.untilDate);
var airport = obj.airport;
$http.get("/Services/JoppdService.svc/getKombiImport/"+fromDate+"/"+untilDate+"/"+.airport)
.success(function (response) {
$scope.education = response;
});
}
Also, do not have empty spaces (" ") while forming URLs. 另外,在形成URL时,请勿有空格(“”)。
If you want to initialize anything, use ng-init
like this 如果你想初始化什么,用ng-init
像这样
如果还没有的话,您需要将内容包装在里面。还应该用于日期输入
You must use ng-init
to initialize these values like ng-init="fromDate = 0"
. 您必须使用ng-init
初始化这些值,例如ng-init="fromDate = 0"
。
You could also just declare these variables at the begining of your controller such as $scope.fromDate = 0;
您也可以在控制器的$scope.fromDate = 0;
声明这些变量,例如$scope.fromDate = 0;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.