AngularJS 表单未绑定到 $http 请求

Question

 <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>

我的 Http 请求是这样的

        $scope.getData = function() {
            $http.get("/Services/JoppdService.svc/getKombiImport/" + $scope.fromDate + "/" + $scope.untilDate + "/" + $scope.airport)
                 .success(function (response) {
                     $scope.education = response;
                 });
        }

提交后，我在控制台中有如下请求

http://localhost:8080/Services/JoppdService.svc/getKombiImport/undefined/undefined/undefined

dateFrom、dateUntil 和 airport 没有绑定。问题出在哪里？

Answer 1

使用ng-submit，将需要的参数绑定到对象obj中，如表单中的obj.fromDate、obj.untilDate、obj.airport。使用按钮类型为submit

你的 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>

在ng-submit 方法getData() 中传递obj，现在看起来像getData(obj)

您必须将 fromDate 和 untilDate 转换为字符串。看看this。将下面的convertToString() 替换为该链接中提到的解决方案。

然后在你的控制器中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;
                 });
        }

另外，形成 URL 时不要有空格 (" ")。

如果你想初始化任何东西，请使用ng-init，比如this

Answer 2

如果您还没有将您的内容包装在里面 你也应该使用日期输入

Answer 3

您必须使用ng-init 来初始化这些值，例如ng-init="fromDate = 0"。

您也可以在控制器的开头声明这些变量，例如 $scope.fromDate = 0;