0

我正在尝试使用 AngularJS 从输入字段获取输入值到另一个隐藏的输入字段（在同一页面中的另一个表单中），因此如果用户在另一个表单上按下提交，我可以稍后传输它。

<div ng-app="">

    <p>Name: <input type="text" ng-model="name"></p>
//down the code...
    <form name="whatever" method="post">
        <input type="hidden" ng-bind="name" value="">
    </form>

</div>

当我将数据放入可见输入字段后检查代码时，一切看起来都很好 - 所以当我更改可见输入中的数据时，我也可以在隐藏输入中看到它，但是在我之后我在 POST 变量中看不到它提交表单 - 我猜这是因为它不会更改隐藏输入中的值字段，只是在 和 之间的内容。

我怎样才能让它工作，以便我更改隐藏输入的值- 但不是打开和关闭输入字段之间的内容？

4

2 回答 2

1

只需将 ng-bind 替换为 ng-value，例如：

<input type="hidden" ng-value="name">

（归功于 Himmet Avsar）

于 2015-01-18T16:07:04.377 回答
1

我看到你已经回答了自己。无论如何，在处理表单时，您应该采用更多“角度方式”，让角度进行“发布”。例如：

HTML 模板

<body ng-controller="MainCtrl">
  <form name="form1" 
        ng-submit="submit()">
    Name: <input type="text" 
                 class="form-control" 
                 name="name" 
                 ng-model="user.name" 
                 required>
    <div class="alert alert-warning" 
         ng-show="form1.name.$error.required">
         Required field
    </div>
    <input type="submit" 
           class="btn btn-primary" 
           value="submit">
  </form>
  <div class="alert"  
       ng-class="{ 'alert-success': response.status === 200, 'alert-danger': response.status !== 200 }"
       ng-show="response !== null">
    DATA: {{ response.data }}<br>
    HTTP {{ response.status }} {{ response.statusText }} 
  </div>
  <hr>
  <form name="form2" ng-submit="submit()">
    Name: <input type="text" 
                 class="form-control" 
                 ng-model="user.name">
    Age: <input type="number" 
                class="form-control" 
                min="1" 
                max="100" 
                ng-model="user.age">
    <input type="submit" 
           class="btn btn-primary" 
           value="submit" disabled>
  </form>
</body>

JavaScript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.user = {};
  $scope.response = null;

  $scope.submit = function() {
    $scope.response = null;

    $http({
      method: 'POST',
      url: 'http://jsonplaceholder.typifcode.com/posts',
      data: $scope.user,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function (response) {
      $scope.response = response;
    }).catch(function (response) {
      $scope.response = response;
    });
  };
});

你会得到类似的东西

图片

相关plunker在这里http://plnkr.co/edit/M7zQzp

于 2015-01-18T16:57:14.763 回答