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

combined max and min of two input number fields

本文关键字：最大值 最小值 组合 字段 数字 两个 输入      更新时间：2023-09-26
    <!-- 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模型名称，它仍然会同时更改所有表。我想要的是让它们独立地改变，所以如果我从下拉列表中选择表1中的选项1，它应该相应地将男性和女性设置为最大值1和0。这很好，直到我从表2中选择另一个选项，然后它开始更改表1和表2并相互冲突。需要帮助。

您可以为此目的使用ng-change指令。我创建了一个小型JsFiddle。请在这里查看。

<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;
    }
  }
相关文章：