表单中的数据不会传递给提交函数-使用Angular

Data from form are not passed to submit function - Using Angular

本文关键字：提交 函数 Angular 使用 数据 表单      更新时间：2023-09-26

我对使用Angular实现的表单有问题。在作用域中定义我的变量，我可以在html表单（ng模型）中看到值（预填充），但当我提交函数时，新数据（由用户插入）不会更新控制器中的模型（$scope-var）。这里是我的html和js控制器的剪报：

<form class="form-horizontal">
 <h3>Citizen</h3>
 <div class="row">
   <div class="form-group">
     <label for="name" class="col-sm-2 control-label">Name</label>
     <div class="col-sm-4">
     <input type="text" class="form-control" id="name" ng-model="ticketDetails.ticketDetails.name" placeholder="Name">
   </div>
   <label for="DOB" class="col-sm-2 control-label">Birth date</label>
   <div class="col-sm-4">
     <input type="date" class="form-control" id="DOB" ng-model="ticketDetails.ticketDetails.DOB" placeholder="Birth Date">
   </div>
  </div>
</div>...

和控制器

angular.module('demoApp', [])

.controller（'mainController'，函数（$scope，$http）｛

//    $scope.ticketDetails = { "ticketDetails" : {
//        "name": "Giovanni Vigorelli",
//        "DOB": "1974-05-02T05:07:13Z",
//        "driverLicense": "e345234",
//        "registration": "hdd843",
//        "ticketType": "Speeding",
//        "date": "2016-05-02T05:07:13Z",
//        "location": "34 Queen St, Auckland",
//        "ticketId": "12345",
//        "officer": "Oscar Nice"
//    }};

$scope.ticketDetails = { "ticketDetails": {}};
$scope.ticketDetails.ticketDetails.ticketId = (+new Date).toString(36).slice(-5);
// The following should be the authentucated user
$scope.ticketDetails.ticketDetails.officer = "Oscar Nice";

var bpmQueryParam = 'action=start&bpdId=25.c1206b63-1e94-4aaa-9dc1-76363270b441&processAppId=2066.d0e91cc6-a515-4965-ba6f-516bdbddcb00&params=' + JSON.stringify($scope.ticketDetails) + '&parts=all';

$scope.startProcess = function(){
    console.log('### In startProcess');
    console.log("### bpmQueryParam: " + bpmQueryParam);
    var req = {
        method: 'POST',
        headers:  {'Authorization': 'Basic YWRtaW46YWRtaW4=','Accept': 'application/json','Access-Control-Allow-Origin': '*', 'Content-Type': 'application/x-www-form-urlencoded'},
        url: 'http://1.1.1.1:9080/rest/bpm/wle/v1/process',
        data: bpmQueryParam
    }

基本上，我不需要var的双向同步，只是从控制器到视图，而不是从视图到控制器。

有什么建议吗？干杯，Giovanni

我假设$scope.startProcess是您的提交函数。请在提交功能内写下以下行：

var bpmQueryParam = 'action=start&bpdId=25.c1206b63-1e94-4aaa-9dc1-76363270b441&processAppId=2066.d0e91cc6-a515-4965-ba6f-516bdbddcb00&params=' + JSON.stringify($scope.ticketDetails) + '&parts=all';

您已经在函数外编写了此代码，因此它将获取$scope.ticketDetails变量的初始数据。

你应该这样写：

$scope.startProcess = function(){
    var bpmQueryParam = 'action=start&bpdId=25.c1206b63-1e94-4aaa-9dc1-76363270b441&processAppId=2066.d0e91cc6-a515-4965-ba6f-516bdbddcb00&params=' + JSON.stringify($scope.ticketDetails) + '&parts=all';
    // Rest of your code
}
相关文章：