0

I want to show/hide div on specific option selection from a dropdown. But the div stays hidden all the time.

 <select class="form-control" ng-model="Type">
                    <option>First</option>
                    <option>Second</option>
                    <option>Third</option>
                    <option>Forth</option>
                </select>

      <div ng-hide="Type==='First'">
      <label>Div Content</div>
      </div>
user3421352
  • 101
  • 2
  • 4
  • 13

1 Answers1

0

Much better for this purpose ng-switch directive would fit. Please see jsfiddle here

html:

<div ng-app="app">
    <div ng-controller="Ctrl">
        <select ng-model="selection" ng-options="item for item in items"></select>
        <hr/>
        <div class="animate-switch-container" ng-switch on="selection">
            <div ng-switch-when="first">First option</div>
            <div ng-switch-when="second">Second option</div>
            <div ng-switch-when="third">Third option</div>
            <div ng-switch-when="forth">Forth option</div>
            <div ng-switch-default>default</div>
        </div>
    </div>
</div>

JS:

var app = angular.module('app', []);

app.controller('Ctrl', function ($scope) {
    $scope.items = ['first', 'second', 'third', 'forth'];

});
sylwester
  • 16,498
  • 1
  • 25
  • 33
  • I have multiple option comparision in ng-switch-when, I dont think its possible using ng-switch. – user3421352 Jun 11 '14 at 15:43
  • Hi in your question was ' want to show/hide div on specific option selection from a dropdown' so what are other multiple option ? Check this out maybe that will help http://jsfiddle.net/FFVuL/2/ – sylwester Jun 11 '14 at 16:22