javascript - 两个输入数字字段的组合最大值和最小值

Question

    <!-- begin snippet: js hide: false console: true babel: false -->

        <!-- language: lang-js -->

    //this changes the values dynamically when selecting numbers

    function ClickToEditCtrl($scope) {

    var option =  document.getElementById("dropdown");





      $scope.title = "Welcome to this demo!";


      $scope.update = function (source){  

        //this part is done. Replace logic here.
       //alert(source);
       //option 1 solo person 
       if(option.value=="1"){

          var getMax = 1;

     if(source == "male"){
     $scope.res.female = getMax - $scope.res.male;
        }

           if(source == "female") {
    $scope.res.male = getMax - $scope.res.female;
       }


      }
    //option 2  ensembley
    if(option.value=="2"){

          var getMax = 15;

     if(source == "male"){
     $scope.res.female = getMax - $scope.res.male;
        }

           if(source == "female") {
    $scope.res.male = getMax - $scope.res.female;
       }


      }
    //option 3 chior
      if(option.value=="3"){

          var getMax = 25;

     if(source == "male"){
     $scope.res.female = getMax - $scope.res.male;
        }

           if(source == "female") {
    $scope.res.male = getMax - $scope.res.female;
       }


      }



    }


    } 

    <!-- language: lang-html -->

    <table >

      <!--FIRST ROW OF ENTRIES-->
      <tr>

            </select></td>
        <td class="tg-yw41"><select class="dropdown" id="dropdown" name="category1[]"  onchange="changeValue(this)" /> required> 
                <option value="" selected="selected"></option>
    <option value="1" id="1"> A-Solo 1 person</option>
    <option value="2" id="2" >B-Ensemble 2-15 persons</option>
    <option value="3" id="3">C-Choirs 16-25 persons</option>

            </select> </td>

        <td class="tg-yw4l" style="margin-left:-20px;"><input id="male"  name="numMales1[]" class="male" type="number"   style="margin: 0 0rem 1rem;"  onkeypress='validate(event)' ng-model="res.male1"  ng-change="update('male')" required/> </td>
        <td class="tg-yw4l"><input id="female"   name="numFemales1" class="female" type="number"  style="margin: 0 0rem 1rem;" onkeypress='validate(event)' ng-model="res.female1" ng-change="update('female')" required/> </td>

      </tr>

    </table>
 <!-- language: lang-html -->
  <!--SECOND ROW OF ENTRIES-->
          <table >

      <tr>

            </select></td>
        <td class="tg-yw41"><select class="dropdown" id="dropdown" name="category1[]"  onchange="changeValue(this)" /> required> 
                <option value="" selected="selected"></option>
    <option value="1" id="1"> A-Solo 1 person</option>
    <option value="2" id="2" >B-Ensemble 2-15 persons</option>
    <option value="3" id="3">C-Choirs 16-25 persons</option>

            </select> </td>

        <td class="tg-yw4l" style="margin-left:-20px;"><input id="male"  name="numMales1[]" class="male" type="number"   style="margin: 0 0rem 1rem;"  onkeypress='validate(event)' ng-model="res.male1"  ng-change="update('male')" required/> </td>
        <td class="tg-yw4l"><input id="female"   name="numFemales1" class="female" type="number"  style="margin: 0 0rem 1rem;" onkeypress='validate(event)' ng-model="res.female1" ng-change="update('female')" required/> </td>

      </tr>

    <!--SECOND ROW OF ENTRIES-->

    </table>

所以我复制了这些表，正如你所看到的，如果你尝试将 angularjs 代码应用到它们两个，无论我是否更改 ng-model 名称，它仍然会同时更改所有表。我想要的是让它们独立更改，因此如果我在表 1 的下拉列表中选择选项 1，它应该相应地将男性和女性设置为最大值 1 和 0。这工作正常，直到我从表 2 中选择另一个选项，然后它开始更改表 1 和表 2 并相互冲突。需要这方面的帮助。

Answer 1

您可以使用 ng-change 指令来实现此目的。我创建了一个小型 JsFiddle。请检查这个here .

<div>
  <label>male</label>
  <input type="number" min="0" max="5" ng-model="res.male"  ng-change="update('male')">
</div>
<div>
  <label>female</label>
  <input type="number" min="0" max="5" ng-model="res.female" ng-change="update('female')">
</div>

<小时/>

  $scope.update = function (source){  

    var getMax = 5; //as you have said this part is done. Replace your logic here.
    //alert(source);
    if(source == "male"){
        $scope.res.female = getMax - $scope.res.male;
    }
    if(source == "female") {
        $scope.res.male = getMax - $scope.res.female;
    }
  }