将值放入隐藏输入,然后将其放入 POST 变量中
Putting value to hidden input and then getting it in POST variable
我正在尝试使用 AngularJS 从输入字段到另一个隐藏的输入字段(在同一页面的另一个表单中)获取输入值,这样如果用户在另一个表单上按下提交,我可以稍后传输它.
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
//down the code...
<form name="whatever" method="post">
<input type="hidden" ng-bind="name" value="">
</form>
</div>
当我将数据放入可见输入字段后检查代码时,一切看起来都很好 - 所以当我更改可见输入中的数据时,我也可以在隐藏输入中看到它,但我看不到它提交表单后的 POST 变量 - 我猜这是因为它不会更改隐藏输入中的值字段,只是更改 和 .
之间的值
我怎样才能让它工作,以便我更改隐藏输入的 值 - 但不是打开和关闭输入字段之间的值?
只需将 ng-bind 替换为 ng-value,例如:
<input type="hidden" ng-value="name">
(感谢 Himmet Avsar)
我看到你已经自己回答了。无论如何,在处理表单时,您应该多 "angular way",让 angular 做 "posting"。例如:
HTML 模板
<body ng-controller="MainCtrl">
<form name="form1"
ng-submit="submit()">
Name: <input type="text"
class="form-control"
name="name"
ng-model="user.name"
required>
<div class="alert alert-warning"
ng-show="form1.name.$error.required">
Required field
</div>
<input type="submit"
class="btn btn-primary"
value="submit">
</form>
<div class="alert"
ng-class="{ 'alert-success': response.status === 200, 'alert-danger': response.status !== 200 }"
ng-show="response !== null">
DATA: {{ response.data }}<br>
HTTP {{ response.status }} {{ response.statusText }}
</div>
<hr>
<form name="form2" ng-submit="submit()">
Name: <input type="text"
class="form-control"
ng-model="user.name">
Age: <input type="number"
class="form-control"
min="1"
max="100"
ng-model="user.age">
<input type="submit"
class="btn btn-primary"
value="submit" disabled>
</form>
</body>
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.user = {};
$scope.response = null;
$scope.submit = function() {
$scope.response = null;
$http({
method: 'POST',
url: 'http://jsonplaceholder.typifcode.com/posts',
data: $scope.user,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
$scope.response = response;
}).catch(function (response) {
$scope.response = response;
});
};
});
你会得到类似的东西
相关插件在这里http://plnkr.co/edit/M7zQzp
我正在尝试使用 AngularJS 从输入字段到另一个隐藏的输入字段(在同一页面的另一个表单中)获取输入值,这样如果用户在另一个表单上按下提交,我可以稍后传输它.
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
//down the code...
<form name="whatever" method="post">
<input type="hidden" ng-bind="name" value="">
</form>
</div>
当我将数据放入可见输入字段后检查代码时,一切看起来都很好 - 所以当我更改可见输入中的数据时,我也可以在隐藏输入中看到它,但我看不到它提交表单后的 POST 变量 - 我猜这是因为它不会更改隐藏输入中的值字段,只是更改 和 .
之间的值我怎样才能让它工作,以便我更改隐藏输入的 值 - 但不是打开和关闭输入字段之间的值?
只需将 ng-bind 替换为 ng-value,例如:
<input type="hidden" ng-value="name">
(感谢 Himmet Avsar)
我看到你已经自己回答了。无论如何,在处理表单时,您应该多 "angular way",让 angular 做 "posting"。例如:
HTML 模板
<body ng-controller="MainCtrl">
<form name="form1"
ng-submit="submit()">
Name: <input type="text"
class="form-control"
name="name"
ng-model="user.name"
required>
<div class="alert alert-warning"
ng-show="form1.name.$error.required">
Required field
</div>
<input type="submit"
class="btn btn-primary"
value="submit">
</form>
<div class="alert"
ng-class="{ 'alert-success': response.status === 200, 'alert-danger': response.status !== 200 }"
ng-show="response !== null">
DATA: {{ response.data }}<br>
HTTP {{ response.status }} {{ response.statusText }}
</div>
<hr>
<form name="form2" ng-submit="submit()">
Name: <input type="text"
class="form-control"
ng-model="user.name">
Age: <input type="number"
class="form-control"
min="1"
max="100"
ng-model="user.age">
<input type="submit"
class="btn btn-primary"
value="submit" disabled>
</form>
</body>
JavaScript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.user = {};
$scope.response = null;
$scope.submit = function() {
$scope.response = null;
$http({
method: 'POST',
url: 'http://jsonplaceholder.typifcode.com/posts',
data: $scope.user,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
$scope.response = response;
}).catch(function (response) {
$scope.response = response;
});
};
});
你会得到类似的东西
相关插件在这里http://plnkr.co/edit/M7zQzp