AngularJS，如何使两个输入字段'每当它们动态变化时，s的和总是等于第三个输入

AngularJS, how to make two input field's sum always equals to a third input whenever they dynamically change?

本文关键字：输入 变化 于第三 动态 字段 何使两 AngularJS      更新时间：2023-09-26

这里有一个困难，有三个输入字段，类型号：

字段1____（*必填）、字段2____、字段3____

如何使用angularjs来实现这些：I.如果在字段2和字段3上没有输入，则将它们留空；二、每当输入其中任何一个时，另一个的值将自动更新，以便它们的总和始终为字段1中的值；III、 它们有如下验证：不能大于字段1中的值，也不能为负数。

<input type="number" name="input1" ng-model="input1"/>
<input type="number" ng-change="input3 = (input1 && input2)?input1 - input2:0" name="input2" ng-model="input2"/>
<input type="number" ng-change="input2 = (input1 && input3)?input1 - input3:0" name="input3" ng-model="input3"/>

您可以阅读AngularJS的官方表单文档，了解如何对字段进行验证。

您也可以从控制器中执行此操作，并从分部中取出逻辑。这不是100%的工作示例，但它是一个选项。我只是在输入字段上添加了一个监视（3个输入标记中的任何一个的任何更改都会触发这个监视），并设置html属性max和min。

 <input type="number" 
    data-ng-model="fields[0]"
    min="1"
    max="2"
    required="fields.required" />

对字段1和字段2执行相同操作或使用ng重复

JS:

    $scope.fields= [0,0,0];
    $scope.fields.required = "required"; //this is if you generate the html tags with ng-repeat only
    $scope.$watchCollection('fields', function(newFields, oldFields) {
        //do your math and set
        function setFields(){
            $scope.fields[0] = newFields[0];
            $scope.fields[1] = y;
            $scope.fields[2] = z;
        }();
    });
相关文章：