Cleaning up the controller and angularjs functions - for a drop-down list with several custom favorites

how can i clear this code. here is my function in my controller. I use this to control 3 different custom drop down lists in my html. I want when you exit them, they close. I wish I had to give them each of my variables for ng-show, but I think I do it, because if ng-show is true for one, then they will all be displayed together. It is also wrong to put all this in a controller, and not in a directive or factory or something else, in addition, to clear the function itself.

 $scope.toggle = function (option,type) {   
                if (option == 'subdiv') {
                        $scope.notMain = true;
                        if ($scope.notMain) {
                                if (type == 'item') {
                                    $scope.showItemOptions = true;
                                    $scope.showOptions = false;
                                    $scope.showOrderOptions = false;
                                }
                            else if (type == 'style') {
                                $scope.showOptions = true;
                                $scope.showItemOptions = false;
                                $scope.showOrderOptions = false;
                            }
                            else if (type == 'order') {
                                $scope.showOrderOptions = true;
                                $scope.showItemOptions = false;
                                $scope.showOptions = false;
                            }
                        }
                }//end of if subdiv
                else if (option == 'maindiv') {
                    if (!$scope.notMain) {                        
                            $scope.showItemOptions = false;                
                            $scope.showOptions = false;
                            $scope.showOrderOptions = false;
                    }
                    $scope.notMain = false;
                }//end of if maindiv
            };

here is the html for only one of the dropdowns (but they are all the same with different variables:

 <div class="dropdownlistheader"   ng-click="toggle('subdiv','order')">
 <input type="text" readonly="readonly" class="dropdownlistinput" value="{{selectedOrderValuesDisplay}}" /> </div>
 <div id="ddl123" ng-show="showOrderOptions" class="dropdownlist">
  <div ng-show="showOrderOptions" ng-repeat="option in OrdersDDL">
<label> <input type="checkbox" ng-model="selected[$index]" ng-click="toggleOrderSelection(option.Number, option.Details)">  {{option.Details}}</label> </div></div>  
+4
1

. , ng-show, ddl, bool, .

  $scope.toggle = function (option,type) {
        if (option == 'subdiv') {
                $scope.notMain = true;
                if ($scope.notMain) {
                    $scope.showDDL = type;
                }
        }
        else if (option == 'maindiv') {
            if (!$scope.notMain) {
                $scope.showDDL = '';
            }
            $scope.notMain = false;
        }
    };

html: ng-show == "type" // hardcoded html

0

Source: https://habr.com/ru/post/1630088/


All Articles