需要的想法：AngularJS：选择带有多个选项标签的下拉菜单答案

【问题标题】：Ideas Needed: AngularJS: Select Dropdown with several Option Tags需要的想法：AngularJS：选择带有多个选项标签的下拉菜单
【发布时间】：2014-09-15 15:46:52
【问题描述】：

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

  <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 class="sidebar-nav vertical-nav">
         ...
        </div>

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

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

必须有更好的方法来做到这一点。有人有什么想法吗？

【问题讨论】：

不是 100% 清楚是什么问题，但似乎 3 个收音机（或切换按钮）会更好。一个用于清除过滤器，一个用于显示“过滤器”，第三个用于显示两种类型
我想用 1 个下拉菜单（选择标签）同时控制“扩展视图”和“过滤器”，除非有更好的排列方式？
仍然不是 100% 清楚主要问题是什么。一个简单的演示可能会有所帮助
我试图通过选择下拉菜单来隐藏和显示 2 个不同的视图。当用户单击“显示扩展视图”然后单击“显示过滤器”时，我希望两个视图都被呈现。但是，目前由于选择标签绑定到 PODOptions，如果我同时选择它们，“扩展视图”的值将被“过滤器”覆盖，因此只会显示过滤器视图。我想知道是否有办法解决这个问题，或者我是否可以采取更好的设置？
请不要将那么长的代码粘贴到注释块中。那里不能读。如果没有控制器和一点数据，html 本身并没有太多用处。对于演示，有几个资源，如 Plunker 或 jsfiddle.net

标签： jquery html angularjs angularjs-directive

【解决方案1】：

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 = '';

};

【讨论】：