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

概述我该如何清理这段代码.这是我在我的控制器中的功能.我用这个来控制我的html中的3个不同的自定义下拉列表.我想当你点击它们时,它们会关闭.我希望我不需要给他们每个人自己的ng-show变量,但我想我这样做是因为如果ng-show对于一个是真的那么他们都会一起显示.将所有这些都放在控制器而不是指令或工厂或其他东西中也是错误的 – 除了清理功能本身. $scope.toggle = function 我该如何清理这段代码.这是我在我的控制器中的功能.我用这个来控制我的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    ng-click="toggle('subdiv','order')"> <input type="text" Readonly="Readonly"  value="{{selectedOrderValuesdisplay}}" /> </div> <div ID="ddl123" ng-show="showOrderOptions" >  <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>

解决方法 我将整个事情改为一个功能.通过更改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;        }    };

在HTML中：ng-show ==“type”//类型在HTML中是硬编码的

总结

以上是内存溢出为你收集整理的html – 清理angularjs控制器和功能 – 用于多选定制的下拉列表全部内容，希望文章能够帮你解决html – 清理angularjs控制器和功能 – 用于多选定制的下拉列表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。