Question

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

以下是我创建表单的方法：的index.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控制器，我把它命名为“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控制器中获得的是传递值时未定义的变量，这是我的java控制器： 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字符串first_date和@PathVariable字符串last_date中获取的内容在通过javascript传递时未定义，但是当我通过webbrowser {{3}触发我的JSON服务时} 它工作正常。这意味着在文本框中提交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" />

然后在您的控制器中，您可以使用$scope.Last_date或$scope.First_date来引用这些值

Answer 2

您尚未为inputText添加ng-model，它将控制器值绑定到视图。

<div class="form-group">
  <label for="exampleInputName2">First Date</label>
  <input type="text" class="form-control" id="First_Date" ng-model="First_Date"/>
</div>
<div class="form-group">
  <label for="exampleInputEmail2">Last Date</label>
  <input type="text" class="form-control" id="Last_date" ng-model="Last_Date" />
</div>

在var urlReport下方添加以下两个链接，以初始化First_Date和Last_Date的值。

$scope.First_Date = '';
$scope.Last_Date = '';

Answer 3

你必须在输入中添加一个ng-model attrib，如下所示

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

和第二次

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

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

3 个答案: