需要的想法：AngularJS：选择带有多个选项标签的下拉列表(Ideas Needed: AngularJS: Select Dropdown with several Option Tags)

我有一个select标签，下面有几个选项：

<form class="navbar-form navbar-right" role="search"> <label class="left-padding"> <font color="white">Custom: </font> <select name="options" ng-model="PODOptions"> <option value="" select> </option> <option value="Extended View">Show Extended View</option> <option value="">Hide Extended View</option> <option value="Filter">Show Filter</option> <option value="">Hide Filter</option> </select> </label> </form>

当用户选择一个选项时，我想显示和隐藏页面的不同部分。我已将选择选项结果绑定到PODOptions。 “过滤器”是指我的垂直导航栏：

我想隐藏当用户选择隐藏过滤器并显示用户选择显示过滤器时，我的“扩展视图”指的是页面上我想要显示的另一个div的不同部分，并在选择选项时隐藏。

目前，我一直在使用ng-switch来控制页面上呈现的内容，但是当用户选择“显示过滤器”然后“显示扩展视图”时我会遇到问题，因为过滤器和扩展视图都应该是显示，但只要PODOptions绑定到一个新变量，Filter选项就会消失。

必须有更好的方法来做到这一点。有没有人有任何想法？

I have a select tag with several options underneath:

<form class="navbar-form navbar-right" role="search"> <label class="left-padding"> <font color="white">Custom: </font> <select name="options" ng-model="PODOptions"> <option value="" select> </option> <option value="Extended View">Show Extended View</option> <option value="">Hide Extended View</option> <option value="Filter">Show Filter</option> <option value="">Hide Filter</option> </select> </label> </form>

and I would like to show and hide different parts of my page when the user selects an option. I have binded the select option result to PODOptions. "Filter" refers to my vertical navbar:

which I would like to hide when the user selects Hide Filter and show when the user selects show filter and my "Extended View" refers to a different section of another div on the page that I would like to show and hide upon selection of an option.

At the moment, I have been using ng-switch to control what is rendered on the page, however I run into problems when the user selects "Show Filter" and then "Show Extended View" since both the filter and the extended views should be shown, but as soon as PODOptions gets binded to a new variable, the Filter option goes away.

There must be a better way to do this. Does anyone have any ideas?

最满意答案

HTML：

<select name="options" ng-model="PODOptions" ng-change="PODOptionsHandler()"> <option value="">Select...</option> <option value="extendedView">Extended View</option> <option value="hideExtendedView">Hide Extended View</option> <option value="showFilter">Show Filter</option> <option value="hideFilter">Hide Filter</option> </select> <div class="sidebar-nav vertical-nav" ng-show="showFilter"> </div>

JavaScript的：

$scope.PODOptionsHandler = function(){ switch ($scope.PODOptions) { case 'showFilter': $scope.showFilter = true; break; case 'hideFilter': $scope.showFilter = false; break; case 'extendedView': $scope.extendedView = true; break; case 'hideExtendedView': $scope.extendedView = false; break; } $scope.PODOptions = ''; };

HTML:

<select name="options" ng-model="PODOptions" ng-change="PODOptionsHandler()"> <option value="">Select...</option> <option value="extendedView">Extended View</option> <option value="hideExtendedView">Hide Extended View</option> <option value="showFilter">Show Filter</option> <option value="hideFilter">Hide Filter</option> </select> <div class="sidebar-nav vertical-nav" ng-show="showFilter"> </div>

JavaScript:

$scope.PODOptionsHandler = function(){ switch ($scope.PODOptions) { case 'showFilter': $scope.showFilter = true; break; case 'hideFilter': $scope.showFilter = false; break; case 'extendedView': $scope.extendedView = true; break; case 'hideExtendedView': $scope.extendedView = false; break; } $scope.PODOptions = ''; };

更多推荐