Forms in AngularJS
Radio Buttons
We can easily work with radio buttons in AngularJS. For this purpose, we have to use the ng-model directive and bind it to the radio button. Radio buttons with the same ng-model can have different values, but only the selected one will be used. As only one radio button will be selected, so we can dynamically change the output depending on the input value. So we will use, ng-switch-when to show different outputs depending on the inputs.
ng-model Directive:-
The ng-model directive binds an HTML form element to a variable in the scope. If the variable does not exist in the scope, it will be created.
Syntax:-
< element ng-model="name" >< /element >
Further Explanation:-
| Value | Description |
|---|---|
| name | The name of the property you want to bind to the form field. |
ng-switch Directive:-
The ng-switch directive is used to hide or show HTML elements depending on an expression. If ng-switch-when directive value gets matched, then child element will get displayed other none of it will be displayed.
Syntax:-
< element ng-switch="expression">
< element ng-switch-when="value" >< /element >
< element ng-switch-when="value" >< /element >
< element ng-switch-default >< /element >
< /element >
Further Explanation:-
| Value | Description |
|---|---|
| expression | An expression that will remove elements with no match, and display elements with a match. |
