jquery - 需要的想法 : AngularJS: Select Dropdown with several Option Tags

Question

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

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

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

        <div class="sidebar-nav vertical-nav">
         ...
        </div>

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

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

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

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

};