| |
|
AngularJS Forms
Within the forms in AngularJS will provides some very silent fatures like data-binding and vaildations of input controls.Below are the list of input controls
Input Controls
Below are thr HTML input elements:-
(1)input elements
(2)select elements
(3)button elements
(4)textarea elements
with the help ng-model directive we will bind input controls which provides data-binding. Below is the example which helps you to understand the data-binding. In below example we will understand that application have a property named employeename. And in below example ng-model directive binds the input controller to the rest of our application. And in below example the property employeename can be referred to in a controller:-
And in another example we can also referred to another place of application:-
Checkbox
As we knows the checkbox has the two values either true or false. If check box is checked then it is true we use this value in our application to display some values by using ng-show directives.
Radiobuttons
In below example we will bind radio button to our application with ng-model directive with 3 values. And same ng-model have different values and we will display only the selected one.
In Above example myTestVar will be either ASP.NET,Java or AngularJS.
Selectbox
In below example we will bind select boxes to our application with the ng-model directive. And property define ng-model attribute will have the value of selected option from select box. Below selectbox we have 3 values
In above example value of myTestVar will either be asp.net,java or angularJS
One More Example
In below example we have tried some value on input box and have below facts
(i)ng-app directive defines the AngularJS application.
(ii)ng-controller directive defines the application controller.
(iii)ng-model directive binds 2input elements to the user object in the model.
(iv)myTestCtrl controller sets initial values to master object and we define reset() method.
(v)reset() methods sets the user object equal to the master object.
(vi)ng-click directive invokes the reset() method when button is clicked.
 | |
|
|
|
|