AngularJS不发送隐藏的输入值答案

【问题标题】：AngularJS not sending hidden input valueAngularJS不发送隐藏的输入值
【发布时间】：2016-03-13 04:38:02
【问题描述】：

我正在尝试在 AngularJS 中从我的表单中获取数据，除了我没有输入任何内容的字段之外，这一切正常。我将字段从隐藏更改为文本，但两者都不起作用，但是如果你检查元素，您可以在其中看到正确的值。这是我的 HTML：

 <div ng-controller="postMessageCtrl as Ctrl">
    <form ng-submit="processMessage()">
        <div class="form-group">
            <input type="message" class="form-control" placeholder="Message" ng-model="formData.message">


            a{{data.receiver.id}}a
            <input type="hidden" class="form-control" ng-model="formData.receiver" ng-value="data.receiver.id" />
        </div>
        <button type="submit" class="btn btn-primary btnq-lg btn-block">Verzenden</button>
    </form>
</div>

这是我的控制器：

app.controller('postMessageCtrl', function ($scope, $http, $state, localStorageService) {

    $scope.formData = {};
    //$scope.formData = localStorageService.get('userKey');

    $scope.formData = {
        key: localStorageService.get('userKey'),
        message: '',
        receiver: ''
    };

    console.log($scope.formData);
});

key和message填写正确，但是receiver id填写不正确。有什么建议？

【问题讨论】：

能否添加processMessage()的实现？
processmessage 在 console.log(formdata) 下面，我在 console.log 之后就退出了代码
我个人认为不需要使用 AngularJS 提交，因为无论如何，由于双向绑定，您的数据对象总是正确加载。只需在单击按钮时执行Save() 函数。可以帮助您避免复杂性。
我是 Angular 新手....我真的不明白该怎么做
你可以简单地使用 ngInit 指令，检查我的答案。

标签： javascript angularjs

【解决方案1】：

来自AngularJS does not send hidden field value的回答：

您不能对隐藏字段使用双重绑定。解决方法是使用括号：

<input type="hidden" name="someData" value="{{data}}" /> {{data}}

在 GitHub 上查看此主题：https://github.com/angular/angular.js/pull/2574

从 Angular 1.2 开始，您可以使用 ng-value 指令将表达式绑定到输入的 value 属性。该指令应与输入单选或复选框一起使用，但适用于隐藏输入。

这是使用 ng-value 的解决方案：

<input type="hidden" name="someData" ng-value="data" />

更新：

另一种解决方案是直接在$scope.formData 中设置值，而不是在初始化时使用hidden input 字段：

$scope.formData = {};
//$scope.formData = localStorageService.get('userKey');

$scope.formData = {
    key: localStorageService.get('userKey'),
    message: '',
    receiver: ''
};

$scope.formData.receiver = $scope.data.receiver.id  // Set the value directly in your `formData` since you are using Angular;
console.log($scope.formData);

【讨论】：

我是不是完全按照你在这里说的做......？我正在使用 ng 值，因为我已经阅读了该帖子。
但是您正在使用ng-model 和ng-value。能否请您删除它并重试。
好的，让我们退后一步。你如何在$scope.data.receiver.id 中填充值？
我只是把所有东西都放在scope.formdata中，key通过localstorageservice填写，message+receiver通过form填写。
问题是这样的数据永远不会绑定到 OP 需要的模型。加上 ngValue 没有 ngModel 就没有意义。即使您添加 ngModel 它仍然无法工作，因为 ngValue 用于选择框内的单选按钮和选项元素。

【解决方案2】：

简单的解决方案是使用ngInit指令：

<input type="hidden" class="form-control" 
    ng-model="formData.receiver" 
    ng-init="formData.receiver = data.receiver.id" />

【讨论】：

这让我在 console.log 中没有定义接收器
数据对象从何而来？
来自这一行：

【解决方案3】：

通过单击按钮时调用函数来避免提交肤色，例如在此Plunk 上。

HTML：

<div ng-controller="postMessageCtrl as Ctrl">
  <form>
      <div class="form-group">
          <input type="message" class="form-control" placeholder="Message" ng-model="messageInput">
          <button ng-click="Add()">Add</button>
          <p></p>
          <button type="submit" class="btn btn-primary btnq-lg btn-block" ng-click="Send()">Send</button>
      </div>
      <p></p>
      <b>Messages</b>
      <ul>
        <li ng-repeat="message in formData.messages">{{message}}</li>
      </ul>
  </form>
</div>

AngularJS 控制器：

app.controller("postMessageCtrl", [
      "$scope",
      "$http",
      function($scope, $http){
        var self = {};

        $scope.messageInput = '';

        $scope.formData = {
            key: 'someUserKey',
            messages: [],
            receiver: null
        };

        $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.Person).success(function(data, status) {
            $scope.hello = data;
          });
        };
}]);

示例在控制台会出现400 bad request错误，因为使用的url显然是不行的，但是原理是正确的。

这样你甚至不需要添加隐藏字段，因为它们不是必需的（你总是从$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;

您将需要实现某种方式通过消息[0]提供该接收器；

您会注意到receiver 在控制台日志中变成了Object。

【讨论】：

我现在 100% 遵循您的示例，但现在它仍然显示隐藏字段为空。
a{{data.receiver.id}}a 这个变量在屏幕上显示变量，所以我确定我得到了正确的 id。 a{{data.receiver.id}}a
我知道，它只是行不通，因为 data 未定义，请参阅我的答案。
这里没有定义数据吗？

鉴于您提供的代码，它没有在您的控制器中定义。它只是不存在。