我试图将输入文本值捕获到Angular JS Application中。我使用javaScript将当前日期和时间显示到文本字段中,文本框能够获取当前的获取和时间。我在点击提交按钮时尝试将输入值发布到wcfr服务,但问题是它无法将日期和时间发布到wcf服务。我在控制台窗口中检查了Google Chrome,并且没有发布当前日期和时间...
这是我的HTML代码:
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/CreateCurrentAccount.js"></script>
<script>
function myFunction() {
document.getElementById('account_creation_date').placeholder= Date();
}
</script>
</head>
<body onload="myFunction()">
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td></td>
</tr>
<tr>
<td>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Account Creation Date</span>
</td>
<td>
<input type="text" id="account_creation_date" placeholder=" " data-ng-model="Account_Creation_Date" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Account Type</span>
</td>
<td>
<input type="text" id="account_type" required data-ng-model="Account_Type" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Branch Sort Code</span>
</td>
<td>
<input type="text" id="branch_sort_code" data-ng-model="Branch_Sort_Code" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Account Fee</span>
</td>
<td>
<input type="text" id="account_fee" required data-ng-model="Account_Fee" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Account Balance</span>
</td>
<td>
<input type="text" id="account_balance" data-ng-model="Account_Balance" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span> Over Draft Limit</span>
</td>
<td>
<input type="text" id="over_draft_limit" required data-ng-model="Over_Draft_Limit" require="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span> Account Holder Id</span>
</td>
<td>
<input type="text" id="account_holder_id" required data-ng-model="Account_Holder_Id" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Login" value="Login" data-ng-click="login()" />
</td>
</tr>
</table>
<div style="color: red;">{{msg}}</div>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/CreateCurrentAccount.js"></script>
这是脚本文件代码。
///// <reference path="../angular.min.js" />
var app = angular.module("WebClientModule", [])
.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
$scope.OperType = 1;
//1 Mean New Entry
//To Clear all input controls.
function ClearModels() {
$scope.OperType = 1;
$scope.Account_Creation_Date = "";
$scope.Account_Type = "";
$scope.Branch_Sort_Code = "";
$scope.Account_Fee = "";
$scope.Account_Balance = "";
$scope.Over_Draft_Limit = "";
$scope.Account_Holder_Id = "";
}
$scope.login = function () {
var User = {
Account_Creation_Date: $scope.Account_Creation_Date,
Account_Type: $scope.Account_Type,
Branch_Sort_Code: $scope.Branch_Sort_Code,
Account_Fee: $scope.Account_Fee,
Account_Balance: $scope.Account_Balance,
Over_Draft_Limit: $scope.Over_Draft_Limit,
Account_Holder_Id: $scope.Account_Holder_Id
};
myService.AuthenticateUser(User).then(function (pl) {
console.log(pl.data)
if (pl.data) {
$scope.msg = "Account Created Successfully";
window.location.href = "/Register/Index";
}
else {
$scope.msg = "Account is not Created !";
console.log("Some error Occured" + err);
}
}, function (err) {
$scope.msg = "Account is not Created !";
console.log("Some error Occured" + err);
});
};
}]);
app.service("myService", function ($http) {
this.AuthenticateUser = function (User) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/CreateCurrentAccountDetail", JSON.stringify(User));
}
})
以下是网络选项卡中隐藏的值。
{"Account_Type":"Business","Branch_Sort_Code":"11-00-11","Account_Fee":"12.0","Account_Balance":"12300","Over_Draft_Limit":"123000","Account_Holder_Id":"2"}
这是运行应用程序时的屏幕截图..