取消选中所有设置项禁用

时间:2017-03-16 11:36:59

标签: angularjs bootstrap-multiselect

我在textbox上使用bootstrap-multiselect和相同的选项

<label>Options:</label>
   <div ng-model="val.options" ng-dropdown-multiselect="" options="array" extra-settings="settings2" events="events"> </div>
   <label>Codes:</label>
      <label>A:</label>
        <input type="text" ng-model="val.A" ng-disabled="aDisable">
      <label>B:</label>
        <input type="text" ng-model="val.B" ng-disabled="bDisable">
      <label>C:</label>
        <input type="text" ng-model="val.C" ng-disabled="cDisable">
      <label>D:</label>
        <input type="text" ng-model="val.D" ng-disabled="dDisable">
      <label>E:</label>
        <input type="text" ng-model="val.E" ng-disabled="eDisable">
    </div>

指令代码: -

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

    options.$inject = ['$http' , '$timeout];

    function branch($http, $timeout) {
        return {
            restrict: 'EA',
            scope: {

            },
            controller: function ($scope) {

                $scope.disable = function(){
                    $scope.aDisable = true;
                    $scope.bDisable = true;
                    $scope.cDisable = true;
                    $scope.dDisable = true;
                    $scope.eDisable = true;
                };
                $scope.disable();

                $scope.array = [{
                    name: "A"
                }, {
                    name: "B"
                }, {
                    name: "C"
                }, {
                    name: "D"
                }, {
                    name: "E"
                }];

                $scope.settings = {
                    smartButtonMaxItems: 11,
                    scrollable: true,
                    displayProp: "name",
                    idProp: "name",
                    externalIdProp: "name"
                };

                $scope.settings2 = {
                    smartButtonMaxItems: 7,
                    scrollable: true,
                    displayProp: "name",
                    idProp: "name",
                    externalIdProp: "name",
                };

                $scope.enabling = function(e){
                    switch(e) {
                            case 'A': $scope.aDisable = false;
                                          break;
                            case 'B': $scope.bDisable = false;
                                          break;
                            case 'C': $scope.cDisable = false;
                                          break;
                            case 'D': $scope.dDisable = false;
                                          break;  
                            case 'E': $scope.eDisable = false;
                                          break;                                       
                        }
                };

                $scope.events = {
                    onItemSelect: function(item){
                        switch(item.name) {
                            case 'A': $scope.aDisable = false;
                                          break;
                            case 'B': $scope.bDisable = false;
                                          break;
                            case 'C': $scope.cDisable = false;
                                          break;
                            case 'D': $scope.dDisable = false;
                                          break;  
                            case 'E': $scope.eDisable = false;
                                          break;                                 
                        }
                    },

                    onItemDeselect: function(item){
                        switch(item.name) {
                            case 'A': $scope.aDisable = true; 
                                          break;
                            case 'B': $scope.bDisable = true; 
                                          break;
                            case 'C': $scope.cDisable = true; 
                                          break;
                            case 'D': $scope.dDisable = true; 
                                          break;  
                            case 'E': $scope.eDisable = true; 
                                          break;                                  
                        }
                    }
                };

            }

            },
            templateUrl: ''
        };
    }

})();

我在这里遇到的问题是当我点击“检查所有”时。所有文本框都已启用,但是当我点击“取消选中所有文本框”时他们没有禁用。我该怎么办?

0 个答案:

没有答案