angular downdown multiselect用于连接三个下拉列表之间的数据

时间:2017-04-27 07:15:41

标签: angularjs

我有三个多选下拉菜单: -

<label>Dropdown One</label>
<div ng-model="a.dp1" ng-dropdown-multiselect="" options="multiSelectArray" selected-model="dropDownOne" extra-settings="multiSelectSettings">
</div>

<label>Dropdown Two</label>
<div ng-model="a.dp2" ng-dropdown-multiselect="" options="multiSelectArray" selected-model="dropDownTwo" extra-settings="multiSelectSettings">
</div>


<label>Dropdown Three</label>
<div ng-model="a.dp3" ng-dropdown-multiselect="" options="multiSelectArray" selected-model="dropDownThree" extra-settings="multiSelectSettings">
</div>

指令代码: -

(function () {
    'use strict';
    angular.module('myApp.components')
        .directive('page', page);

    page.$inject = ['$http', '$timeout', 'ApiServices'];

    function page($http, $timeout, ApiServices) {
        return {
            restrict: 'EA',
            scope: {},
            controller: function ($scope) {
                $scope.a = { };
                $scope.dropDownOne = [];
                $scope.dropDownTwo = [];
                $scope.dropDownThree = [];
                $scope.multiSelectArray = [{
                    name: "Ayan"
                }, {
                    name: "Rita"
                }, {
                    name: "Mohit"
                }, {
                    name: "Shittal"
                }, {
                    name: "Jayant"
                }, {
                    name: "Sachin"
                }, {
                    name: "Tina"
                }, {
                    name: "Babita"
                }, {
                    name: "Priya"
                }];
                $scope.multiSelectSettings = {
                    smartButtonMaxItems: 11,
                    scrollable: true,
                    displayProp: "name",
                    idProp: "name",
                    externalIdProp: "name"
                };
            },
            templateUrl: 'js/folder/system/page.html'
        };
    }

})();

我在这里要做的是当我从'Dropdown One'中选择特定选项时,在'Dropdown Two'和'Dropdown Three'中选择了相同的选项并被禁用,以便用户无法取消选择它们。此外,用户可以根据需要在“下拉列表2”和“下拉列表3”中选择更多选项,但应选中“下拉列表1”中的选项并禁用。 我正在尝试使用“已禁用”属性禁用选项,但无法使用所选选项。知道我该怎么做吗?

0 个答案:

没有答案