Needed ideas: AngularJS: Choose Dropdown with multiple optional tags

I have a select tag with multiple options at the bottom:

  <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 bound the selection result to PODOptions. "Filter" refers to my vertical navbar:

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

      

which I would like to hide when the user selects Hide Filter and shows when the user selects the show filter and my "Extended View" refers to another section of another div on the page that I would like to show and hide after selecting the option.

At the moment I am using ng-switch to control what is displayed on the page, however I am running into problems when the user selects "Show Filter" and then "Show Advanced View" as both the filter and advanced views should be shown. but as soon as the PODOptions are bound to the new variable the Filter parameter goes away.

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

+3


source to share


1 answer


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

};

      

+2


source







All Articles