AngularJS不发送隐藏输入值
AngularJS不发送隐藏输入值
我正在尝试从我的AngularJS表单中获取数据，除了我没有在字段中输入任何内容外，其他都可以正常工作。我将该字段从隐藏更改为文本，但两者都不起作用，但是如果您检查元素，您可以看到其中的正确值。这是我的HTML代码：\n
\n这是我的控制器代码：\n
app.controller('postMessageCtrl', function ($scope, $http, $state, localStorageService) {
$scope.formData = {
key: localStorageService.get('userKey'),
message: '',
receiver: ''
};
console.log($scope.formData);
});
\n键和消息已正确填充，但接收者ID没有。有什么建议吗？
问题的原因是代码中出现了未定义的变量data，而formData中的receiver也没有包含id属性。解决方法是将代码中的data改为formData，并确保receiver包含id属性。可以参考以下代码：
避免通过在按钮点击时处理函数调用来提交表单，可以像在这个Plunk中一样使用一个按钮点击的函数调用来处理一切。
Html：
AngularJS Controller：
app.controller("postMessageCtrl", [
"$scope",
"$http",
function($scope, $http){
var self = {};
$scope.messageInput = '';
$scope.formData = {
key: 'someUserKey',
messages: [],
receiver: {
id: 1,
name: 'SomeReceiver'
}
};
$scope.Add = function(){
console.log($scope.messageInput);
if($scope.messageInput.length > 0) {
$scope.formData.messages.push($scope.messageInput);
}
};
$scope.Send = function() {
console.log($scope.formData);
$http.post("/somehost/action/", $scope.formData).success(function(data, status) {
$scope.hello = data;
});
};
}]);
这样就不需要添加隐藏字段，因为它们是不需要的（你总是可以从$scope.Person中获取它们的值）。
结论：
从你的原始问题中有两个地方不太合理：
a{{data.receiver.id}}a
这里应该使用formData，data没有定义。
JSON格式不正确
receiver没有包含id属性，根据你的示例代码，应该这样定义：
$scope.formData = {
key: localStorageService.get('userKey'),
message: '',
receiver: {
id: 1,
name: 'SomeReceiver'
}
};
所以如果你的接收者是这样设置的：
$scope.formData.receiver = $scope.formData.messages[0].receiver;
你需要找到一种方法通过messages[0]来提供接收者。
你会注意到控制台日志中，receiver成为了一个对象。
我完全按照你的例子进行了操作，但是现在它仍然显示隐藏字段为空。
a{{data.receiver.id}}a这个变量在屏幕上显示了，所以我确定我得到了正确的id。a{{data.receiver.id}}a <-- 这是我需要的id。
我知道，但它不起作用是因为data没有定义，参考我的答案。
这里是否定义了data？
在你提供的控制器中，它没有定义。它只是不存在。
让我们在聊天中继续这个讨论。
问题的原因是在AngularJS中，隐藏的输入字段（type="hidden"）默认情况下不会被发送到服务器。因此，如果在隐藏的输入字段中设置了ng-model指令，它的值将不会包含在表单数据中。
解决方法是使用ngInit指令来初始化隐藏的输入字段的值。通过将ngInit指令添加到隐藏的输入字段中，并在ngInit指令中设置formData.receiver的值，可以确保该值在表单数据中被正确地发送到服务器。
以下是解决方法的代码示例：
在上述代码中，ngInit指令被添加到隐藏的输入字段中，并在ngInit指令中设置了formData.receiver的值为data.receiver.id。
然而，上述代码可能会导致控制台显示receiver未定义的错误。这是因为data对象未在代码中初始化。
解决此问题的方法是在ngRepeat指令中使用ngInit指令来初始化data对象。在ngRepeat指令中，可以将ngInit指令添加到
以下是解决方法的代码示例：
在上述代码中，ngInit指令被添加到
通过使用上述解决方法，可以确保隐藏的输入字段的值被正确地发送到服务器，并且不会导致控制台错误。
在这个问题中，问题的原因是不能使用双向绑定（double binding）来处理隐藏字段（hidden field）。解决方法是使用方括号来实现绑定。
从Angular 1.2版本开始，可以使用ng-value指令将表达式绑定到输入元素的value属性上。这个指令通常用于单选框（radio）或复选框（checkbox），但在隐藏字段上也能很好地工作。
以下是使用ng-value的解决方法：
另一种解决方法是在初始化时直接在$scope.formData中设置值，而不是使用隐藏字段：
$scope.formData = {};
//$scope.formData = localStorageService.get('userKey');
$scope.formData = {
key: localStorageService.get('userKey'),
message: '',
receiver: ''
};
$scope.formData.receiver = $scope.data.receiver.id; // 直接在formData中设置值，因为你正在使用Angular;
console.log($scope.formData);
但是你在这里使用了ng-model和ng-value。请移除ng-model并再次尝试。
好的，我们来退一步。你是如何填充$scope.data.receiver.id的值的？
我只是将所有的数据都放在了$scope.formdata中，key是通过localstorageservice填充的，而message和receiver是通过表单填充的。
问题在于这种方式不会将数据绑定到需要的模型上。此外，ngValue在没有ngModel的情况下是没有意义的。即使你添加了ngModel，它也不起作用，因为ngValue是用于单选按钮和选择框中的选项元素的。
那个更新后的版本给我一个错误，无法读取未定义的id属性。
我只是写了一个例子。我希望你在那里放入关于如何在HTML隐藏元素中获取实际值的实际代码。
是的，这就是我在之前的评论中问过的，你是如何获取$scope.data.receiver.id的值的，然后你说你通过本地存储填充。我希望在控制器中从本地存储中获取值（正如我在控制器中提到的），而不是在HTML中进行操作。