javascript 如何使用 ng-value 使用 angularjs 发送隐藏字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25294877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to send hidden field values with angularjs using ng-value
提问by user3727514
Here is my form:
这是我的表格：
<form ng-submit = "submit()">
<input ng-model="formData.data" type="text" name="sticky_content" placeholder="protein" required="true"/>
<input type="hidden" name="time_start" ng-value="{{getStuff.e_time}}" required="true"/>
<input ng-model="formData.end" type="text" name="time_end" placeholder="{{getStuff.e_time+100}}" required="true"/>
<input type="hidden" name="zoom_level" ng-value="{{getStuff.zoom}}" required="true"/>
<input type="hidden" name="latitude" ng-value="{{getStuff.lat}}" required="true"/>
<input type="hidden" name="longitude" ng-value="{{getStuff.lon}}" required="true"/>
<button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>
</form>
And this is in my controller:
这是在我的控制器中：
app.controller('mainCtrl',function($scope,$http,sluiceStuff){
$scope.formData={};
$scope.formData.e_time = sluiceStuff.e_time; //again, these are all filling correctly in the "inspect element tab. They just aren't submitting in the POST"
$scope.formData.zoom = sluiceStuff.zoom;
$scope.formData.lat = sluiceStuff.lat;
$scope.formData.lon = sluiceStuff.lon;
Right now only the 1rst and 3rd inputs work - the ng-model ones. By work I mean get sent with the POST request. I know that for the other ones, the "{{getStuff.e_time}}" is filling correctly because i can see the number itself when I do inspect element. However, these other 4 inputs don't even submit, let alone submit correctly. Is this the correct format for my form and am I using ng-value correctly? I am running a node.js server, but since the request isn't even being sent with all of the data, I don't believe that there can be an issue on the server.
现在只有第一个和第三个输入有效 - ng-model 的。通过工作，我的意思是随 POST 请求一起发送。我知道对于其他人，“{{getStuff.e_time}}”正在正确填充，因为我在检查元素时可以看到数字本身。但是，其他 4 个输入甚至都没有提交，更不用说正确提交了。这是我的表单的正确格式吗？我是否正确使用了 ng-value？我正在运行 node.js 服务器，但由于请求甚至没有与所有数据一起发送，我认为服务器上不会出现问题。
Edit: upon request, here is the server side code:
编辑：根据要求，这里是服务器端代码：
app.post('/api/stickies',function(req,res){
db.run("INSERT INTO stickies (data, start, end, zoom_level, latitude, longitude) VALUES (?,?,?,?,?,?)", [ req.body.data,req.body.time_start, req.body.end, req.body.zoom_level, req.body.latitude, req.body.longitude ]);
res.send(200);
});
and also here is the submit function:
还有这里是提交功能：
$scope.submit = function() {
$scope.formData.e_time = sluiceStuff.e_time; //these 4 lines I added
$scope.formData.zoom = sluiceStuff.zoom; //to make it work. But I am
$scope.formData.lat = sluiceStuff.lat; //not sure that they are necessary
$scope.formData.lon = sluiceStuff.lon; // or that this is the best way to do it
$http.post('/node/api/stickies', $scope.formData)
.then(function(data){
$scope.stickies.push(data.config.data);
//console.log(data.data);
},function(err){console.log(err)});
};
采纳答案by user3727514
Sorry to be answering my own question so early, but I solved this. But basically I had to add all of those definitions:
很抱歉这么早回答我自己的问题，但我解决了这个问题。但基本上我必须添加所有这些定义：
$scope.formData.e_time = sluiceStuff.e_time;
$scope.formData.zoom = sluiceStuff.zoom;
$scope.formData.lat = sluiceStuff.lat;
$scope.formData.lon = sluiceStuff.lon;
into the submit() function in my scope. I guess this makes sense, because it needs to know what those are, but I though having them in the ng-value field would save them there so that they could be accessed in the post request.
进入我范围内的 submit() 函数。我想这是有道理的，因为它需要知道那些是什么，但我虽然将它们放在 ng-value 字段中会将它们保存在那里，以便可以在发布请求中访问它们。
edit: ah so furthermore: ,it seems like I didn't need any of those hidden fields at all. adding to the formData object upon submit is enough to add them to the post request.
编辑：啊所以此外：，似乎我根本不需要任何这些隐藏字段。在提交时添加到 formData 对象足以将它们添加到发布请求中。
回答by Jeff N
Do those values needto be in the form? Could you include the data in a different way, perhaps by defining a custom submit function that sends along those generated values with the data the user inputs? Seems to me like an unnecessary workaround. What does the server expect? Is it a regular HTTP POST, or is it an API call that expects a JSON object? In the latter case, it would be trivial to add extra values after the form was submitted.
这些值需要在表单中吗？您能否以不同的方式包含数据，也许通过定义一个自定义提交函数，将这些生成的值与用户输入的数据一起发送？在我看来，这是一种不必要的解决方法。服务器期望什么？它是常规的 HTTP POST，还是需要 JSON 对象的 API 调用？在后一种情况下，在提交表单后添加额外的值将是微不足道的。
It's also best practice to name your form, and then validate the data. That would look something like this:
为表单命名，然后验证数据也是最佳实践。那看起来像这样：
<form name="myForm" ng-submit="myForm.$valid && submit()">
Please provide more information to make it easier for us to answer your question. As it stands, I think having those fields in hidden inputs is not necessary.
请提供更多信息，以便我们更轻松地回答您的问题。就目前而言，我认为没有必要在隐藏输入中包含这些字段。
回答by Narek Mamikonyan
You should use ng-modeldirective and you can have access to this values in your scope and after that you can take this values and do your post requests
您应该使用ng-model指令，并且您可以在您的范围内访问此值，然后您可以使用此值并执行您的发布请求
<input type="hidden" name="time_start" required="true" ng-model="getStuff.e_time"/>
回答by V31
You are not using the ng-value correctly. It should be without the curly braces
您没有正确使用 ng 值。它应该没有花括号
So your html should be:
所以你的 html 应该是：
<form ng-submit = "submit()">
<input ng-model="formData.data" type="text" name="sticky_content" placeholder="protein" required="true"/>
<input type="hidden" name="time_start" ng-value="getStuff.e_time" required="true"/>
<input ng-model="formData.end" type="text" name="time_end" placeholder="{{getStuff.e_time+100}}" required="true"/>
<input type="hidden" name="zoom_level" ng-value="getStuff.zoom" required="true"/>
<input type="hidden" name="latitude" ng-value="getStuff.lat" required="true"/>
<input type="hidden" name="longitude" ng-value="getStuff.lon" required="true"/>
<button type="submit" name="add_sticky" value="add a new stickie!">new sticky</button>
</form>
