Question

这是我的表格：

<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>

这是在我的控制器中：

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;

现在只有第一和第三个输入工作 - ng模型输入。通过工作我的意思是发送POST请求。我知道对于其他人来说，＆＃34; {{getStuff.e_time}}＆＃34;填写正确，因为当我检查元素时，我可以看到数字本身。但是，这些其他4个输入甚至不提交，更不用说正确提交了。这是我的表单的正确格式，我正确使用ng值吗？我正在运行node.js服务器，但由于请求甚至没有与所有数据一起发送，我不相信服务器上可能存在问题。

编辑：根据要求，这是服务器端代码：

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);
});

这里也是提交功能：

$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)});
    };

Answer 1

那些需要的值是否在表单中？您是否可以通过定义自定义提交函数以不同的方式包含数据，该函数使用用户输入的数据发送这些生成的值？在我看来就像一个不必要的解决方法。服务器期望什么？它是一个常规的HTTP POST，还是一个需要JSON对象的API调用？在后一种情况下，在提交表单后添加额外的值将是微不足道的。

最佳做法是为表单命名，然后验证数据。这看起来像这样：

<form name="myForm" ng-submit="myForm.$valid && submit()">

请提供更多信息，以便我们更轻松地回答您的问题。就目前而言，我认为在隐藏输入中使用这些字段是不必要的。

Answer 2

很抱歉这么早回答我自己的问题，但我解决了这个问题。但基本上我必须添加所有这些定义：

$scope.formData.e_time = sluiceStuff.e_time;  
$scope.formData.zoom = sluiceStuff.zoom;
$scope.formData.lat = sluiceStuff.lat;
$scope.formData.lon = sluiceStuff.lon;

进入我的范围中的submit（）函数。我想这是有道理的，因为它需要知道它们是什么，但我在ng-value字段中将它们保存在那里以便可以在post请求中访问它们。

编辑：啊，所以更进一步：，似乎我根本不需要任何隐藏的字段。在提交时添加到formData对象就足以将它们添加到post请求中。

Answer 3

您应该使用ng-model指令，并且您可以在范围内访问此值，然后您可以获取此值并发布您的帖子请求

<input type="hidden" name="time_start" required="true" ng-model="getStuff.e_time"/>

Answer 4

您没有正确使用ng值。应该没有花括号

所以你的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>

如何使用ng-value使用angularjs发送隐藏的字段值

4 个答案: