Question

我试图从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);
});

正确填写密钥和消息，但接收方ID不正确。有什么建议？

Answer 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指令将表达式绑定到input的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);

Answer 2

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

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

Answer 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错误请求错误，因为使用的网址显然不起作用，但原则是正确的。

这样您甚至不需要添加隐藏字段，因为它们不是必需的（您始终拥有$scope.Person的价值）。

<强>结论：

从原始问题中有两件事没有用处：

<强> 一{{data.receiver.id}}一个

您应该在此处使用 formData ，数据未定义。

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。

AngularJS不发送隐藏的输入值

3 个答案: