具有许多控件的窗体，它们之间具有交互.比$scope.$watch更清洁的方法

Form with lots of controls with interaction between them. Cleaner approach than $scope.$watch?

本文关键字：方法 scope watch 清洁 控件 许多 窗体 之间 交互      更新时间：2023-09-26

我正在构建一个角度应用程序，表单有大约 15 个控件。这是一个金融应用程序。请不要建议分解页面等。

某些控件相互依赖。大约有 5 个输入控件（我们称之为源代码控件），其中任何一个都可以更改并影响 5 个其他控件中的一个或多个（我们称它们为目标控件）。我的结构方式是，我对 5 个源变量中的每个变量都有一个 $scope.$watch，在每个监视函数中，我有一些代码来决定要更新 5 个最远变量中的哪一个并更新它们。其中一款手表的示例如下所示。

$scope.$watch('money.price',function(newVal,oldVal) {
    if(newVal != oldVal) {
        if($scope.money.quantity != undefined) {
            updatePrincipal($scope)
            updateFees($scope);
            $scope.money.net = $scope.money.principal + $scope.money.fee 
        }
    }
});

我真的不觉得这很优雅。有没有更好/更清洁的方法可以做到这一点？（表单将来只会变得稍微复杂一点，即增加 2-3 个依赖字段，但不会超过此）。

假设你的输入控件附加了一个ng-model，我建议将ng-change添加到每个输入表单中，在那里你可以使用相同的函数一次更新所有范围绑定

利用ng-bind指令创建的$watch。

<div ng-bind="getMoneyNet()"></div>
     OR SIMPLY
{{ getMoneyNet() }}

不要在控制器中创建$watch，而是定义函数。

 $scope.getMoneyNet = function() {
     if ($scope.money.quantity != undefined) {
        updatePrincipal($scope)
        updateFees($scope);
        $scope.money.net = $scope.money.principal + $scope.money.fee 
     };
     return $scope.money.net;
 };

然后，在每个摘要周期中，ng-bind指令创建的$watch计算money.net的值并根据需要更新 DOM。

相关文章：