Disable Input Field According To Select Option Value Angularjs

In a project, I have a dropdown menu with hard coded values and some input fields. I need to disable some of the inputs if a specific value is selected. I tried This is my code (I

Solution 1:

You're disableInputs is not changing with change in paperSelection. You have to wrap it in some kind of watch.

You can simply update disableInputs variable by adding a ng-change parameter in your select, something like this:

<select ng-model="paperSelection" ng-init="paperSelection='1191'" ng-change="disableInputs = (paperSelection == 377.95)">

---

Here is a working plunker

https://plnkr.co/edit/qTNd7ipZ6EzVisNDNoIq?p=preview

Solution 2:

create a function in ng change and from that based on the condition make the input disable or not. Here is sample demo

also change the $scope.disableInputs === true; to $scope.disableInputs = true; as mention by the @maximedubois

angular.module("app",[])
.controller("ctrl",function($scope){

if ($scope.paperSelection == 377.95) {
    $scope.disableInputs = true;
  }
  else 
    $scope.disableInputs =false;
    
$scope.selectChange = function(){
  switch($scope.paperSelection){
    case'1700' : 
      $scope.disableInputs = true;
      break;
    case'1191' : 
      $scope.disableInputs = false;
      break;
    default :
      console.log("no value");
  }
}
})

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app"ng-controller="ctrl"><selectng-model="paperSelection"ng-init="paperSelection='1191'"ng-change="selectChange()"><optionvalue="1700">A3 Paper</option><optionvalue="1191">A4 Paper</option><optionvalue="842">A5 Paper</option><optionvalue="377.95">Barcode Sticker 3 in a row</option></select><p>Number Of Columns Needed : <inputtype="number"ng-model="numberOfColumns"placeholder="Number Of Columns"ng-disabled="disableInputs"></p><p>Enter the number of Stickers : <inputtype="number"ng-model="numberOfStickersNeeded"placeholder="Number of Stickers"></p><p>Enter Height of the Sticker (in px) : <inputtype="number"ng-model="heightOfSticker"placeholder="Enter Height"ng-disabled="disableInputs"></p></div>