更新取决于另一个值的变化的值，反之亦然

Question

我有这样的问题。我在网上找不到解决方案。我有一个值取决于另一个值的修改。反之亦然。这是我的代码

<div class="panel-body">
        <div class="row">
            <label class="col-lg-2 label-margin"> Fondo Bucket 1 (EUR)</label>
            <div class="col-lg-1 right-col-margin">{{::fondo.fnd1}}</div> ---> INPUT
            <label class="col-lg-2 label-margin"> Fondo Bucket 2 (EUR)</label>
            <div class="col-lg-7 right-col-margin">{{::fondo.fnd2}}</div> ---> INPUT
        </div>    
        <div class="row">
            <label class="col-lg-2 label-margin"> Fondo Bucket 1 (DIV)</label> 
            <div class="col-lg-1 right-col-margin">{{::fondo.fnd1Div}}</div> ---> INPUT
            <label class="col-lg-2 label-margin"> Fondo Bucket 2 (DIV)</label>
            <div class="col-lg-7 right-col-margin">{{::fondo.fnd2Div}}</div> ---> INPUT
        </div>
        <div class="row">
            <label class="col-lg-2 label-margin"> Bucket DH </label>
            <div class="col-lg-1 right-col-margin">{{::fondo.bktDH}}</div>
            <label class="col-lg-2 label-margin"> Cambio </label>
            <div class="col-lg-7 right-col-margin">{{::fondo.cambio}}</div>
        </div>
    </div>

我希望能够编辑字段 fondo.fnd1、fondo.fnd2、fondo.fnd1Div 和 fondo.fnd2Div，但是...如果我编辑 fondo.fnd1 fondo.fnd2 fondo.fnd1Div 的新值必须是 fondo.fnd1 和 fondo.cambio 之间的除法，fondo.fnd2Div 的新值必须是 fondo.fnd2 之间的除法] 和 fondo.cambio （我也可以修改这两个字段之一）。相反，如果我修改 fondo.fnd1Div 和 fondo.fnd2Div，fondo.fnd1 的新值必须是 fondo.fnd1Div 和 cambio 之间的乘积，而 fondo.fnd2Div 的新值必须是fondo.fnd2 和 cambio 的乘法。我需要立即更新并避免 "tragic" 循环。我知道我必须使用ng-Change，但我不知道如何使用它。提前谢谢你。

Answer 1

angular 中有许多不同的事件侦听器可用。特别是，有 4 个主要侦听器可用于此场景，每个侦听器的操作略有不同。

ng-keyup

当您想要触发函数以响应用户释放键时使用此事件。这与 ng-keypress 不同，它在按下键时触发，但如果按住键则持续触发。

ng-blur

当您想要检测窗体上的焦点输入是否为 "blurred"，或者换句话说，焦点是否从一个输入切换到另一个时，使用此事件。对于整个输入交互，这只会触发一次。

ng-change

只要向模型提交新值，就会触发此事件。这只会在模型发生变化时触发，而不会在某些条件为真时触发，例如输入表单值无效或 null.

请注意，所有这些侦听器都在输入字段的特定条件下触发，其中 none 是由于对模型值的编程更改而触发的。因此，您不会陷入一个循环，在该循环中更改值会导致触发另一个更改的事件。这是其他框架可能发生的事情，实际上直接改变了 DOM。

更新取决于另一个值的变化的值，反之亦然

Updating value which depends on changing of another value, and vice versa

html

angularjs

angularjs-ng-change