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;
    }
  }

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

1 个答案: