javascript - 具有动态输入值的 Angular 形式

Question

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

这就是我正在努力做的事情。当用户单击 map 时， Angular 会用纬度/经度填充隐藏的表单字段，然后用户提交表单，这最终会导致 Controller 上丢失数据。

这是相关的 Controller 代码:

$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 检查器中一切看起来都正常( map 上的随机点):

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

$scope.formData
Object {}

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

Answer 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();
}

在 Angular 中，如果您为变量提供一个值，并使用ng-model将该变量分配给输入，则输入将获取变量的值，如果我们更改输入值变量值将获取改变。

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