In this example there is a dropdown list with Show and Hide values. The dropdown list is bind with the array named temp. In the temp array there are two values Hide with
ishide true and Show with
ishide false value.
ng- switch directive matches the value of
ishide variable and when the value is true, the container with text Show Example will show and when the value of the
ishide variable is false then container with text Hide Example will show and other will hide. The
ng-switch directive matches the value using the
In this example we have array named temp with the text value Textbox,Number.Checkbox, Radio and Select. The array is bind with the
select list and the selected text bind the
ng-switch directive matches the values with the switch variable using
ng-switch-when directive and if user select TextBox value from the
select list then the Textbox will show and if select Checkbox from the select list then the checkbox will show.
In this example the
ng-switch directive match the values with the numbers entered. If we type numbers from 1 to 4 then the numbers will match with the
ng-switch-when directive and entered number will show in the button with different background colors and if we enter any other number from 1 to 4 then the default section will execute by
In this example we have three radio buttons for admin, user and visitor. The
ng-switch directive is bind with the FrontEndUsers.status variable and for the matched values the message will show either Admin Section or User Section. For the default values Visitor Section message will show.
In this example we have three tabs Angular, Jquery and bootstrap. By default tab variable has Angular value and
ng-switch directive will match values for tab variable so by default Angular tab will open and when we click on the any other tab like on the Jquery tab then the value of tab variable becomes Jquery and Jquery tab will open.
In this example we have a switch which is used for Yes No values or On and Off values. The
ng-switch directive is bind with the
$scope.val variable and by default value of this variable is true, so the switch has active class and switch is on. When you click on the switch it toggles and value of the
$scope.val variable becomes false and switch will off.
In this example of
Ng-Switch, We are taking a
isActive and on initialization we are setting its value ti active. And there are two button to change active and inactive selection Here is the sample html code to show hide div's using
See the output: