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

How to send hidden field values with angularjs using ng-value

本文关键字:隐藏 字段 ng-value angularjs      更新时间:2023-09-26

我的表单如下:

<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请求一起发送。我知道对于其他的,{{getStuff。e_time}}"是正确填充的,因为当我检查元素时,我可以看到数字本身。然而,其他4个输入都没有提交,更不用说正确提交了。这是我的表单的正确格式吗?我是否正确使用了ng-value ?我正在运行一个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);
});

这里还有一个submit函数:

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

这些值需要出现在表单中吗?是否可以用另一种方式包含数据,比如定义一个自定义提交函数,将生成的值与用户输入的数据一起发送?在我看来这是不必要的变通。服务器期望什么?它是一个常规的HTTP POST,还是一个期望JSON对象的API调用?对于后一种情况,在提交表单之后添加额外的值将是微不足道的。

为表单命名,然后验证数据也是最佳实践。它看起来像这样:

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

请提供更多的信息,以便我们更容易回答您的问题。就目前而言,我认为在隐藏输入中设置这些字段是没有必要的。

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

$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请求中。

你应该使用ng-model指令,你可以在你的作用域中访问这个值,然后你可以使用这个值来做你的post请求

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

您没有正确使用ng-value。它应该没有花括号

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