Shanna Chambers Shanna Chambers - 4 months ago 7
Javascript Question

combined max and min of two input number fields

<!-- 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>

<!--SECOND ROW OF ENTRIES-->



</table>


ok so imagine i have two of those tables with the same everything(duplicated) its not working i already have the max and min jquery save in a file that is working on the tables so that part is ok. the angularjs code doesn't work when i repeat the tables.

Answer

You can use ng-change directive for this purpose. I have created a small JsFiddle. Please check this 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;
    }
  }
Comments