Sunday 28 February 2016

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.

No comments:

Post a Comment