Hi I am new to AngularJs. Here my problem is on a certain condition I need to disable my multiselect dropdown.

So, I made the logic and on with the help of I tried to disable the dropdown-

document.getElementById("multidropdown").disabled = true;

But no luck.

So, then I google it and get to know about ng-disable. So, I put a ng-disable there and give it a name like this

ng-disabled="makeItDisabled"

And in my js file, I set

$scope.makeItDisabled = false

And in the condition, I made the same

$scope.makeItDisabled = true

But still got no luck.

This is my HTML-

column type="dropdownMultiSelect" styleName="form-control ng-isolate-scope multidropdown" ng-dropdown-multiselect=""  options="dropdownData" selectedmodel="dropdownelect" extrasettings="multiselectsettings"  events="DropDown_changed" text=""  uniqueID="multidropdown" ng-disabled=" makeItDisabled

This is my js code which I have tried

document.getElementById("multidropdown").disabled = true;

and also

$scope.makeItDisabled = true;

I did the same with the disabled also but there also I was not able to do it. I want to know where I am getting it wrong.

I am using this

Hi I am new to AngularJs. Here my problem is on a certain condition I need to disable my multiselect dropdown.

So, I made the logic and on with the help of I tried to disable the dropdown-

document.getElementById("multidropdown").disabled = true;

But no luck.

So, then I google it and get to know about ng-disable. So, I put a ng-disable there and give it a name like this

ng-disabled="makeItDisabled"

And in my js file, I set

$scope.makeItDisabled = false

And in the condition, I made the same

$scope.makeItDisabled = true

But still got no luck.

This is my HTML-

column type="dropdownMultiSelect" styleName="form-control ng-isolate-scope multidropdown" ng-dropdown-multiselect=""  options="dropdownData" selectedmodel="dropdownelect" extrasettings="multiselectsettings"  events="DropDown_changed" text=""  uniqueID="multidropdown" ng-disabled=" makeItDisabled

This is my js code which I have tried

document.getElementById("multidropdown").disabled = true;

and also

$scope.makeItDisabled = true;

I did the same with the disabled also but there also I was not able to do it. I want to know where I am getting it wrong.

I am using this https://github./dotansimha/angularjs-dropdown-multiselect

• javascript
• html
• angularjs
• drop-down-menu

• are you using any plugin for multiselect dropdown? – Mayank Patel Commented Feb 6, 2017 at 11:39
• I think you are using isolate scope on select and then taking the parent controller scope variable to disable it that why your code is not working – Arun Redhu Commented Feb 6, 2017 at 11:41
• Try for $scope.makeItDisabled = { isDisable: true} and ng-disabled = "makeItDisabled.isDisable" – Arun Redhu Commented Feb 6, 2017 at 11:49
• @MayankPatel no I am not using – shv22 Commented Feb 6, 2017 at 12:02
• @ARUN I tried its not working – shv22 Commented Feb 6, 2017 at 12:16

3 Answers 3

Finally I was able to do it by just using css

I disabled the dropdown by using

pointer-events:none;

Try this:

  <ng-multiselect-dropdown 
       [placeholder]="' '" [data]="myList"
       [(ngModel)]="mySelectedItems" [settings]="mySettings"
       (onSelect)="onItemSelect($event)" (onDeSelect)="onItemDeSelect($event)"
       (onSelectAll)="onSelectAll($event)" 
       (onDeSelectAll)="onDeSelectAll($event)"
       [disabled]=!isToDisable()>
  </ng-multiselect-dropdown>

Use ng-disabled not ngdisabled and it should work. Post further if you have any queries