动态改变 ng-model 的来源答案

【问题标题】：Dynamically change source of ng-model动态改变 ng-model 的来源
【发布时间】：2013-09-09 14:01:18
【问题描述】：

我有运输和帐单字段。如果客户选中“使用运费进行计费”框，我希望计费字段与运输字段匹配。我可以复制这些值，但我宁愿重新绑定帐单字段以匹配运输字段，因此如果选中该框并且对运输进行更改，帐单也会更新。那么我将如何重新绑定 ng-model 的来源，或者我可以使用什么成语来绑定帐单地址字段来实现这一点？

【问题讨论】：

标签： angularjs dynamic binding

【解决方案1】：

维护两个对象

$scope.shipping = { .... };
$scope.billing = { .... };

如果有人选择了他们想要匹配的，就这样做

$scope.billing = $scope.shipping.

由于对象是通过引用进行的，因此当它们相互更新时，另一个也会更新。您可以通过将 $scope.billing 更改回您初始化它的任何内容来删除引用：

$scope.billing = { .... };

如果您也有一个要绑定的复选框，请在其上连接一个 data-ng-change

<input type="checkbox" data-ng-model="MY_MODEL" data-ng-change="myFunction() "/>

然后在你的控制器中有

$scope.MY_MODEL = false;
$scope.myFunction(){
    console.log($scope.MY_MODEL);
}

或者不绑定 data-ng-change 而只是 $watch MY_MODEL：

$scope.MY_MODEL = false;
$scope.$watch("MY_MODEL", function(){
    console.log($scope.MY_MODEL);
}, true);

【讨论】：

好的，很好用！根据复选框是否被选中，绑定/重置的最佳方法是什么？
好的，这几乎可以工作，但由于某种原因，复选框上的数据绑定没有更新。如果我将 MY_MODEL 设置为 true，它最初会被选中，但是当我取消选中它时，myFunction() 仍然将它记录为 true。反之亦然，如果它最初是错误的。更改事件是否拦截数据绑定？
在 MY_MODEL 上使用 $scope.$watch 不会在单击复选框时触发回调
stackoverflow.com/questions/18642371/…

【解决方案2】：

您可以使用ng-checked 而不是使用范围监视来使其轻量级。不要重新发明轮子。

<input type="checkbox" ng-model="flip" ng-checked="checked();">

$scope.checked = function(){
    if($scope.flip){
        $scope.data = ...  //update the data source            
    }else{
        $scope.data = ...  //update the data source
    } 
}

【讨论】：

这可能也可以工作，只是由于某种原因我的复选框没有正确绑定到模型stackoverflow.com/questions/18642371/…