javascript - 单击某个按钮时如何向 angularjs 函数提交文本框值？

Question

我想做的是从 2 个文本框提交 2 个单独的值。每个文本框都包含一个使用 JQuery 的datetimepicker。如何使用 angularjs 将 2 个文本框值提交到 javascript 函数中？

这是我创建表单的方法:索引.html

    <fieldset class="well the-fieldset">
    <h4>Date</h4>
    <form class="form-inline" >
      <div class="form-group">
        <label for="exampleInputName2">First Date</label>
        <input type="text" class="form-control" id="First_Date" />
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Last Date</label>
        <input type="text" class="form-control" id="Last_date" />
      </div>

      <button class="btn btn-success" ng-click="selectPOoutStanding(First_Date,Last_Date)" >Process</button> 
    </form>
    </fieldset>

    <table>
        <thead>
            <tr>
                <th>No PO</th>
                <th>Tanggal PO</th>
                <th>Keterangan</th>
                <th>Tanggal Jatuh Tempo</th>
                <th>Divisi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="listPOoutStanding in listPOoutStandings">
                <td>{{listPOoutStanding.id}}</td>
                <td>{{listPOoutStanding.tgl_opj}}</td>
                <td>{{listPOoutStanding.ket}}</td>
                <td>{{listPOoutStanding.tgl_jth_tempo}}</td>
                <td>{{listPOoutStanding.divisi}}</td>
            </tr>
        </tbody>
    </table>

    </div>
</div>

这是我的 AngularJS Controller ，我将其命名为“App.js”

var app = angular.module('myApp', []);
app.controller('Hello', function($scope, $http) {

    var urlReport = "http://localhost:8080/SpringService/service/laporan/laporanoutstanding";

    $scope.selectPOoutStanding = function selectPOoutStanding(First_Date,Last_Date){
        $http.get(urlReport + "/"+First_Date+"/"+Last_Date)
        .success(function(response){
            alert("heheh");
            $scope.listPOoutStandings = response;
        });
    };
});

传递值时，我在 Java Controller 中得到的是 undefined variable ，这是我的 Java Controller :SpringController.java

@RequestMapping(value = "/laporanoutstanding/{first_date}/{last_date}", method = RequestMethod.GET,headers="Accept=application/json")
public List<PoOutstandingList> selectLaporanPOoutstanding(@PathVariable String first_date, @PathVariable String last_date) {  

    List<PoOutstandingList> LaporanPoOutstanding = new ArrayList<PoOutstandingList>();

    try {
        LaporanPoOutstanding = laporanPOoutstanding.findAllPOoutstanding(first_date,last_date);
    } catch (Exception e) {
        throw new RuntimeException(e);
    }

    return LaporanPoOutstanding;
}

我在@PathVariable String first_date和@PathVariable String last_date中得到的内容通过javascript传递时未定义，但是当我通过网络浏览器触发我的 JSON 服务 http://localhost:8080/SpringService/service/laporan/laporanoutstanding/2015-08-01/2015-08-29它工作正常。这意味着在提交文本框中的 2 个值时，我的 javascript 中遗漏了一些内容。我在这里错过了什么？

Answer 1

您需要在输入控件中使用 ng-model 来获取 angularjs 中的值

<input type="text" class="form-control" ng-model="First_Date" id="First_Date" />
<input type="text" class="form-control" ng-model="Last_date" id="Last_date" />

然后在 Controller 内，您可以使用 $scope.Last_date 或 $scope.First_date 来引用值