Using ng-switch in Angularjs

ng-switch :

ng-switch basically provide us with a functionality to switch views on some client action. This action could be through a drop-down  option change, button click or any other such client action.

For Example :

  <select ng-model="stockShow">

                                <option value="complete">Complete</option>

                                <option value="Receipt">Receipt</option>

                                <option value="Issue">Issue</option>

                                <option value="Balance">Balance</option>

                            </select>

 

Here we have just made a model named stockShow.

 <div ng-switch="stockShow">

                            <div ng-switch-when="complete">

                            <p>This is complete stock div</div>

                           </div>

                            <div ng-switch-when="Receipt">

                                 <p>This is receipt div </p>

                           </div>

  <div ng-switch-when="Issue">

<p>This will give issue div</p>

</div>

</div>

Here, when the user will select certain option , the option value div will become active.

Caution : 

ng-switch has its own scope inside the div in which it is declared, so if you required to have others model in the ng-swtich div. Then we must have to first  declare them implicitly at the controller of the page. That will help us to work with nested scopes in angularjs.