Question

如何清理此代码。这是我在我的控制器中的功能。我用这个来控制我的html中的3个不同的自定义下拉列表。我想当你点击它们时，它们会关闭。我希望我不需要给他们每个人自己的ng-show变量，但我想我这样做是因为如果ng-show对于一个人来说是真的那么他们都会一起展示。将所有这些都放在控制器而不是指令或工厂或其他东西中也是错误的 - 除了清理功能本身。

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

这里只是其中一个下拉列表的html（但它们对于不同的变量都是相同的：

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

Answer 1

我将整个事情改为一个功能。通过更改ng-show变量以包含应该显示的ddl名称的文本，而不是像他们那样，可以轻松地完成它。

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

in html：ng-show ==＆＃34; type＆＃34; //类型是在html

中硬编码的

清理angularjs控制器和功能 - 用于多选定制的下拉列表

1 个答案: