Question

我在页面上显示currentDistrict。初始化为空字符串：

$scope.currentDistrict = '';

以后用WebAPI调用填充：

...
    $scope.currentDistrict = data.currentDistrict;
...

检索到的地区信息以正确的方式显示：

<district-selector current="currentDistrict"></district-selector>

此外，页面中有一个表单，使用json对象：

$scope.address = {
    'district': $scope.currentDistrict,
    'name': '',
    'street': '',
    'city': '',
    'state': '',
    'zip': '',
    'comments': ''
};

表单正在使用此address对象：

我希望$scope.address.district值会随currentDistrict一起变化。比如，如果我更改当前分区，不仅<district-selector>会改变，而且表单中的只读文本框也会改变。

但它永远不会。

所以问题是：当$scope.address.district发生变化时如何更改$scope.currentDistrict？

如果'district': $scope.currentDistrict,不能设置绑定，那么听一个变量的变化并应用于另一个变量的正确方法是什么？

Answer 1

这种情况非常适合$watch功能：

$scope.$watch('currentDistrict', function(newVal, oldVal) {
    $scope.address.district = newVal;
});

通过将此手表放在控制器中，只要currentDistrict的值发生变化，它就会反映在address.district中。

Answer 2

您可以使用ngModelsOptions

中的updateOn

使用ngModelOptions，您可以指定将要自定义的事件列表触发模型更新......

来自AngularJS docs的简单示例

<input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ updateOn: 'blur' }"
           ng-keyup="cancel($event)" /><br />

在您的情况下，更新/更改currentDistrict然后更改address.district

如何在$ scope中设置两个变量之间的双向绑定

2 个答案: