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和{ {1}} 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的乘法。我需要立即更新并避免“悲剧性”循环。我知道我必须使用ng-Change，但我不知道如何使用它。提前谢谢。

Answer 1

角度有许多不同的事件监听器。特别是，在这种情况下可以使用4个主要监听器，每个监听器的运行方式略有不同。

<强> ng-keyup

当您要激活函数以响应用户释放密钥时，将使用此事件。这与按下键时触发的ng-keypress不同，但如果按住键则会持续触发。

<强> ng-blur

当您想要检测表单上的焦点输入是否为“模糊”时，或者换句话说，如果焦点从一个输入更改为另一个输入，则使用此事件。这只会为整个输入交互激活一次。

<强> ng-change

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

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

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

1 个答案: