AngularJS is heavily integrated with form elements to provide data binding and event binding for form elements in applications. In order to provide AngularJS functionality in the correct way, form elements are extended when compiled.
Table 24.2 lists the form elements that AngularJS extends.
Listings 24.1 and 24.2 implement some basic AngularJS form element integration with the scope. Listing 24.1 initializes the scope. Listing 24.2 implements several common form components, including a text box, a check box, radio buttons, and a select
element to illustrate how they are defined in the template and interact with data in the scope. Figure 24.1 shows the resulting webpage.
01 angular.module('myApp', []).
02 controller('myController', function($scope) {
03 $scope.cameras = [
04 {make:'Canon', model:'70D', mp:20.2},
05 {make:'Canon', model:'6D', mp:20},
06 {make:'Nikon', model:'D7100', mp:24.1},
07 {make:'Nikon', model:'D5200', mp:24.1}];
08 $scope.cameraObj=$scope.cameras[0];
09 $scope.cameraName = 'Canon';
10 $scope.cbValue = '';
11 $scope.someText = '';
12 });
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Form Directives</title>
05 </head>
06 <body>
07 <div ng-controller="myController">
08 <h2>Forms Directives</h2>
09 <input type="text" ng-model="someText"> {{someText}}<hr>
10 <input type="checkbox" ng-model="cbValue"
11 ng-true-value="AWESOME" ng-false-value="BUMMER">
12 Checkbox: {{cbValue}}<hr>
13 <input type="radio"
14 ng-model="cameraName" value="Canon"> Canon<br/>
15 <input type="radio"
16 ng-model="cameraName" value="Nikon"> Nikon<br/>
17 Selected Camera: {{cameraName}} <hr>
18 <select ng-model="camera"
19 ng-options="c.model group by c.make for c in cameras">
20 </select>
21 {{camera|json}}
22 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
23 <script src="/js/directive_form.js"></script>
24 </body>
25 </html>