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>