具有动态输入值的角形式答案

【问题标题】：Angular form with dynamic input values具有动态输入值的角形式
【发布时间】：2015-09-23 03:21:13
【问题描述】：

我遇到了角度问题，无法从我的输入中获取动态值。

这就是我想要做的。当用户点击地图时，角度会使用纬度/经度填充隐藏的表单字段，然后用户提交表单，这最终导致控制器上的数据丢失。

这里是相关的控制器代码：

$scope.formData = {};

    $scope.submit = function(addressform) {
      addressService.createAdddress($scope.formData).then(function(result) {
        $scope.addressResponse = result;
      }, function(err) {
          alert(err);
      });
    }

    $scope.userSelectedPoint = function () {
      $scope.lat = map.getLat();
      $scope.lon = map.getLon();
      $scope.address = map.getAddress();
    }

这是相关的 HTML：

<form id="address_form" name="addressform" ng-submit="submit(addressform)">

   <input "lattitude" name="lattitude" type="hidden" ng-model="formData.lattitude" value="{{lat}}">
   <input id="longitude" name="longitude"type="hidden" ng-model="formData.longitude" value="{{lon}}">

   <p>Selected Address: {{address}}</p>
</form>

在 chrome 检查器中一切正常（地图上的随机点）：

但是，当我提交此表单并打印出 $scope.formData 时，我得到一个空对象：

$scope.formData
Object {}

我在这里做错了什么？为什么我的控制器中的formData 是空的，而显然该值是在 HTML 中设置的，从我粘贴的屏幕截图中可以看出？

【问题讨论】：

标签： javascript html angularjs forms data-binding

【解决方案1】：

您需要将值分配给ng-model 变量，而不是value

作为

<input "lattitude" name="lattitude" type="hidden" ng-model="formData.lattitude" />
<input id="longitude" name="longitude"type="hidden" ng-model="formData.longitude" />

将值分配给formData.lattitude。

$scope.formData = {};
$scope.userSelectedPoint = function () {
  $scope.formData.lattitude = map.getLat();
  $scope.formData.longitude  = map.getLon();
  $scope.formData.address = map.getAddress();
}

如果您为变量提供值并且您使用 ng-model 将该变量分配给输入，那么在角度中，输入将获取变量的值，如果我们更改输入值，则变量值会更改。

因此您将formData 对象的lattitude 属性分配给输入。这意味着如果您更改 $scope.formData.lattitude 输入值就会更改。

【讨论】：

【解决方案2】：

在 Angular 中你不能使用 value 属性。您必须用经度/纬度初始化 formData 对象。因此，您还需要任何虚假的隐藏字段。在 Angular 中你不需要这种模式。

【讨论】：