Disable AngularJS dropdown multiselect

Question

I have a directive to disable the angularjs dropdown multiselect, this directive working properly when change the checkbox but it's not working when init the control, I want to disable the dropdown by the value that is passed to the directive when start the controller.

that's the directive:

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 that's the div of 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>

and thats the docs of the Angular js dropdown multiselect if anyone does not know it.

Not sure about this as I've never used this package. If no one seems to be able to help you can always leave a comment / question on the GitHub Issue where you found this solution: github.com/dotansimha/angularjs-dropdown-multiselect/issues/30. Best of luck! — Michael Lynch
– Michael Lynch, Commented Feb 27, 2019 at 14:34

Rawan Mansour · Accepted Answer · 2019-03-04 12:59:36Z

 $scope.hasParentChange = function hasParentChange(hasParent) {
                    if (hasParent != null) {
                        if (hasParent == false) {
                            document.getElementById("ddlParentProperty").getElementsByTagName('button')[0].setAttribute("disabled", "disabled");
                        }
                        else {
                            document.getElementById("ddlParentProperty").getElementsByTagName('button')[0].removeAttribute("disabled");
                        }
                    }
                    else {
                        document.getElementById("ddlParentProperty").getElementsByTagName('button')[0].setAttribute("disabled", "disabled");
                    }

                }

                angular.element(document).ready(function () {
                    $scope.hasParentChange($scope.property.HasParent)
                });

Collectives™ on Stack Overflow

Disable AngularJS dropdown multiselect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related