I need a directive that can disable the dropdown multiselect in AngularJS. It's currently functioning properly when the checkbox is changed, but it's not working when the controller initializes. I want the dropdown to be disabled based on the value passed to the directive when the controller starts.
Here's the directive code:
var FormModule = angular.module('FormModule', []);
FormModule.directive('ngDropdownMultiselectDisabled', function () {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs) {
var $btn;
$btn = $element.find('button');
return $scope.$watch($attrs.ngDropdownMultiselectDisabled, function (newVal) {
return $btn.attr('disabled', newVal);
});
}
};
});
and here's the HTML code for the dropdown:
<div class="col-sm-3">
<input id="chkHasParent" type="checkbox" class="form-control"
ng-model="property.HasParent" ng-checked="property.HasParent==true" />
<label for="chkHasParent" class="lblCheck">Has Parent</label>
</div>
<div class="col-sm-3">
<label>Parent Property</label>
<div id="ddlParentProperty" ng-dropdown-multiselect=""
options="Properties" selected-model="parentPropertyModel"
extra-settings="settingParentProperty"
ng-dropdown-multiselect-disabled="!property.HasParent">
</div>
</div>
For more information on AngularJS dropdown multiselect, check out the documentation.