禁用AngularJS下拉多选

时间:2019-02-27 13:52:16

标签: javascript angularjs

我有一个指令来禁用angularjs dropdown multiselect,该指令在更改复选框时可以正常工作,但在初始化控件时不起作用,我想通过启动控制器时传递给指令的值来禁用下拉菜单

这是指令:

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);
            });
        }
    };
});

这是下拉列表的div:

<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>

如果没有人知道,那就是Angular js下拉多选的docs

1 个答案:

答案 0 :(得分:0)

 $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)
                });