How to enable or disable input fields dynamically in angular js material design

Question

I am having an issue with ng-disable. as i am using angular material i think this is not working. I want my input box to be disabled or enabled dynamically based on condition.

Note:- I have multiple input fields i want disable or enable all of the at a single shot.

I am trying like this

<md-input-container class="md-block" flex-gt-sm>
    <label for="Autocomplete">From</label>
    <input required type="text" class = "hideShadow" ng-model="FromLocation"
           uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" 
          class="form-control" ng-disabled="isDisabled">
    <div ng-messages="searchFlight.FromLocation.$error">
    <div ng-message="required">Please enter from location</div>
     </div>
</md-input-container>

I am trying to access ng-disabled="isDisabled" dynamically like this

$scope.isDisabled = true;

But this is not working. May i know where i am going wrong?

Answer 1

I believe the problem is in the way you did bind the property isDisabled.

try this:

$scope.model = {
    isDisabled: true
};

Then:

ng-disabled="model.isDisabled"

This problem occur when we try to bind a primitive property on a directive. We need to bind a attribute of a object to work properly.

Answer 2

You can enable or disable the field by using ng-disabled

For example, if you want to disable a button initially and after performing something you want to enable the button,

<button class="btn btn-default" type="submit" ng-disabled="isDisabled" ng-click="ok()">OK</button>

$scope.isDisabled = true;

$scope.save = function(){
//after completing the operation set the values of variable to false
$scope.isDisabled = false;
}