From f7fad29fd99cabdbb17fa02dc214de2354f93cdf Mon Sep 17 00:00:00 2001
From: Caitlin Potter
Date: Sat, 15 Feb 2014 20:19:10 -0500
Subject: docs(bike-shed-migration): convert guide <doc:...> examples to
 <example>...

This CL also contains style fixes as the converted scripts caused jshint to complain.
---
 docs/content/guide/forms.ngdoc | 430 ++++++++++++++++++++---------------------
 1 file changed, 215 insertions(+), 215 deletions(-)

(limited to 'docs/content/guide/forms.ngdoc')

diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc
index 2ef5e218..8a23c8c8 100644
--- a/docs/content/guide/forms.ngdoc
+++ b/docs/content/guide/forms.ngdoc
@@ -16,38 +16,38 @@ The key directive in understanding two-way data-binding is {@link ng.directive:n
 The `ngModel` directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
 In addition it provides an {@link ngModel.NgModelController API} for other directives to augment its behavior.
 
-<doc:example>
-<doc:source>
-<div ng-controller="Controller">
-  <form novalidate class="simple-form">
-    Name: <input type="text" ng-model="user.name" /><br />
-    E-mail: <input type="email" ng-model="user.email" /><br />
-    Gender: <input type="radio" ng-model="user.gender" value="male" />male
-    <input type="radio" ng-model="user.gender" value="female" />female<br />
-    <button ng-click="reset()">RESET</button>
-    <button ng-click="update(user)">SAVE</button>
-  </form>
-  <pre>form = {{user | json}}</pre>
-  <pre>master = {{master | json}}</pre>
-</div>
-
-<script>
-  function Controller($scope) {
-    $scope.master = {};
-
-    $scope.update = function(user) {
-      $scope.master = angular.copy(user);
-    };
-
-    $scope.reset = function() {
-      $scope.user = angular.copy($scope.master);
-    };
-
-    $scope.reset();
-  }
-  </script>
-</doc:source>
-</doc:example>
+<example>
+  <file name="index.html">
+    <div ng-controller="Controller">
+      <form novalidate class="simple-form">
+        Name: <input type="text" ng-model="user.name" /><br />
+        E-mail: <input type="email" ng-model="user.email" /><br />
+        Gender: <input type="radio" ng-model="user.gender" value="male" />male
+        <input type="radio" ng-model="user.gender" value="female" />female<br />
+        <button ng-click="reset()">RESET</button>
+        <button ng-click="update(user)">SAVE</button>
+      </form>
+      <pre>form = {{user | json}}</pre>
+      <pre>master = {{master | json}}</pre>
+    </div>
+
+    <script>
+      function Controller($scope) {
+        $scope.master = {};
+
+        $scope.update = function(user) {
+          $scope.master = angular.copy(user);
+        };
+
+        $scope.reset = function() {
+          $scope.user = angular.copy($scope.master);
+        };
+
+        $scope.reset();
+      }
+    </script>
+  </file>
+</example>
 
 
 Note that `novalidate` is used to disable browser's native form validation.
@@ -67,47 +67,47 @@ The following example uses the CSS to display validity of each form control.
 In the example both `user.name` and `user.email` are required, but are rendered with red background only when they are dirty.
 This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.
 
-<doc:example>
-<doc:source>
-<div ng-controller="Controller">
-  <form novalidate class="css-form">
-    Name:
-      <input type="text" ng-model="user.name" required /><br />
-    E-mail: <input type="email" ng-model="user.email" required /><br />
-    Gender: <input type="radio" ng-model="user.gender" value="male" />male
-    <input type="radio" ng-model="user.gender" value="female" />female<br />
-    <button ng-click="reset()">RESET</button>
-    <button ng-click="update(user)">SAVE</button>
-  </form>
-</div>
-
-<style type="text/css">
-  .css-form input.ng-invalid.ng-dirty {
-    background-color: #FA787E;
-  }
-
-  .css-form input.ng-valid.ng-dirty {
-    background-color: #78FA89;
-  }
-</style>
-
-<script>
-  function Controller($scope) {
-    $scope.master = {};
-
-    $scope.update = function(user) {
-      $scope.master = angular.copy(user);
-    };
-
-    $scope.reset = function() {
-      $scope.user = angular.copy($scope.master);
-    };
-
-    $scope.reset();
-  }
-  </script>
-</doc:source>
-</doc:example>
+<example>
+  <file name="index.html">
+    <div ng-controller="Controller">
+      <form novalidate class="css-form">
+        Name:
+          <input type="text" ng-model="user.name" required /><br />
+        E-mail: <input type="email" ng-model="user.email" required /><br />
+        Gender: <input type="radio" ng-model="user.gender" value="male" />male
+        <input type="radio" ng-model="user.gender" value="female" />female<br />
+        <button ng-click="reset()">RESET</button>
+        <button ng-click="update(user)">SAVE</button>
+      </form>
+    </div>
+
+    <style type="text/css">
+      .css-form input.ng-invalid.ng-dirty {
+        background-color: #FA787E;
+      }
+
+      .css-form input.ng-valid.ng-dirty {
+        background-color: #78FA89;
+      }
+    </style>
+
+    <script>
+      function Controller($scope) {
+        $scope.master = {};
+
+        $scope.update = function(user) {
+          $scope.master = angular.copy(user);
+        };
+
+        $scope.reset = function() {
+          $scope.user = angular.copy($scope.master);
+        };
+
+        $scope.reset();
+      }
+    </script>
+  </file>
+</example>
 
 
 
@@ -130,54 +130,54 @@ This allows us to extend the above example with these features:
 - SAVE button is enabled only if form has some changes and is valid
 - custom error messages for `user.email` and `user.agree`
 
-<doc:example>
-<doc:source>
-<div ng-controller="Controller">
-  <form name="form" class="css-form" novalidate>
-    Name:
-      <input type="text" ng-model="user.name" name="uName" required /><br />
-    E-mail:
-      <input type="email" ng-model="user.email" name="uEmail" required/><br />
-    <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
-      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
-      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
+<example>
+  <file name="index.html">
+    <div ng-controller="Controller">
+      <form name="form" class="css-form" novalidate>
+        Name:
+          <input type="text" ng-model="user.name" name="uName" required /><br />
+        E-mail:
+          <input type="email" ng-model="user.email" name="uEmail" required/><br />
+        <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
+          <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
+          <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
+        </div>
+
+        Gender: <input type="radio" ng-model="user.gender" value="male" />male
+        <input type="radio" ng-model="user.gender" value="female" />female<br />
+
+        <input type="checkbox" ng-model="user.agree" name="userAgree" required />
+        I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
+                  required /><br />
+        <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
+
+        <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
+        <button ng-click="update(user)"
+                ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
+      </form>
     </div>
+  </file>
 
-    Gender: <input type="radio" ng-model="user.gender" value="male" />male
-    <input type="radio" ng-model="user.gender" value="female" />female<br />
-
-    <input type="checkbox" ng-model="user.agree" name="userAgree" required />
-    I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
-              required /><br />
-    <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
-
-    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
-    <button ng-click="update(user)"
-            ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
-  </form>
-</div>
+  <file name="script.js">
+    function Controller($scope) {
+      $scope.master = {};
 
-<script>
-  function Controller($scope) {
-    $scope.master = {};
+      $scope.update = function(user) {
+        $scope.master = angular.copy(user);
+      };
 
-    $scope.update = function(user) {
-      $scope.master = angular.copy(user);
-    };
+      $scope.reset = function() {
+        $scope.user = angular.copy($scope.master);
+      };
 
-    $scope.reset = function() {
-      $scope.user = angular.copy($scope.master);
-    };
+      $scope.isUnchanged = function(user) {
+        return angular.equals(user, $scope.master);
+      };
 
-    $scope.isUnchanged = function(user) {
-      return angular.equals(user, $scope.master);
-    };
-
-    $scope.reset();
-  }
-</script>
-</doc:source>
-</doc:example>
+      $scope.reset();
+    }
+  </file>
+</example>
 
 
 
@@ -209,72 +209,72 @@ In the following example we create two directives.
     Note that we can't use input type `number` here as HTML5 browsers would not allow the user to type what it would consider an invalid number such as `1,2`.
 
 
-<doc:example module="form-example1">
-<doc:source>
-<div ng-controller="Controller">
-  <form name="form" class="css-form" novalidate>
-    <div>
-      Size (integer 0 - 10):
-      <input type="number" ng-model="size" name="size"
-             min="0" max="10" integer />{{size}}<br />
-      <span ng-show="form.size.$error.integer">This is not valid integer!</span>
-      <span ng-show="form.size.$error.min || form.size.$error.max">
-        The value must be in range 0 to 10!</span>
-    </div>
-
-    <div>
-      Length (float):
-      <input type="text" ng-model="length" name="length" smart-float />
-      {{length}}<br />
-      <span ng-show="form.length.$error.float">
-        This is not a valid float number!</span>
+<example module="form-example1">
+  <file name="index.html">
+    <div ng-controller="Controller">
+      <form name="form" class="css-form" novalidate>
+        <div>
+          Size (integer 0 - 10):
+          <input type="number" ng-model="size" name="size"
+                 min="0" max="10" integer />{{size}}<br />
+          <span ng-show="form.size.$error.integer">This is not valid integer!</span>
+          <span ng-show="form.size.$error.min || form.size.$error.max">
+            The value must be in range 0 to 10!</span>
+        </div>
+
+        <div>
+          Length (float):
+          <input type="text" ng-model="length" name="length" smart-float />
+          {{length}}<br />
+          <span ng-show="form.length.$error.float">
+            This is not a valid float number!</span>
+        </div>
+      </form>
     </div>
-  </form>
-</div>
-
-<script>
-  var app = angular.module('form-example1', []);
-
-  var INTEGER_REGEXP = /^\-?\d+$/;
-  app.directive('integer', function() {
-    return {
-      require: 'ngModel',
-      link: function(scope, elm, attrs, ctrl) {
-        ctrl.$parsers.unshift(function(viewValue) {
-          if (INTEGER_REGEXP.test(viewValue)) {
-            // it is valid
-            ctrl.$setValidity('integer', true);
-            return viewValue;
-          } else {
-            // it is invalid, return undefined (no model update)
-            ctrl.$setValidity('integer', false);
-            return undefined;
-          }
-        });
-      }
-    };
-  });
-
-  var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
-  app.directive('smartFloat', function() {
-    return {
-      require: 'ngModel',
-      link: function(scope, elm, attrs, ctrl) {
-        ctrl.$parsers.unshift(function(viewValue) {
-          if (FLOAT_REGEXP.test(viewValue)) {
-            ctrl.$setValidity('float', true);
-            return parseFloat(viewValue.replace(',', '.'));
-          } else {
-            ctrl.$setValidity('float', false);
-            return undefined;
-          }
-        });
-      }
-    };
-  });
-</script>
-</doc:source>
-</doc:example>
+  </file>
+
+  <file name="script.js">
+    var app = angular.module('form-example1', []);
+
+    var INTEGER_REGEXP = /^\-?\d+$/;
+    app.directive('integer', function() {
+      return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+          ctrl.$parsers.unshift(function(viewValue) {
+            if (INTEGER_REGEXP.test(viewValue)) {
+              // it is valid
+              ctrl.$setValidity('integer', true);
+              return viewValue;
+            } else {
+              // it is invalid, return undefined (no model update)
+              ctrl.$setValidity('integer', false);
+              return undefined;
+            }
+          });
+        }
+      };
+    });
+
+    var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
+    app.directive('smartFloat', function() {
+      return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+          ctrl.$parsers.unshift(function(viewValue) {
+            if (FLOAT_REGEXP.test(viewValue)) {
+              ctrl.$setValidity('float', true);
+              return parseFloat(viewValue.replace(',', '.'));
+            } else {
+              ctrl.$setValidity('float', false);
+              return undefined;
+            }
+          });
+        }
+      };
+    });
+  </file>
+</example>
 
 
 # Implementing custom form controls (using `ngModel`)
@@ -290,40 +290,40 @@ See {@link guide/directive $compileProvider.directive} for more info.
 
 The following example shows how to add two-way data-binding to contentEditable elements.
 
-<doc:example module="form-example2">
-<doc:source>
-<script>
-  angular.module('form-example2', []).directive('contenteditable', function() {
-    return {
-      require: 'ngModel',
-      link: function(scope, elm, attrs, ctrl) {
-        // view -> model
-        elm.on('blur', function() {
-          scope.$apply(function() {
-            ctrl.$setViewValue(elm.html());
-          });
-        });
-
-        // model -> view
-        ctrl.$render = function() {
-          elm.html(ctrl.$viewValue);
-        };
+<example module="form-example2">
+  <file name="index.html">
+    <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
+    <pre>model = {{content}}</pre>
 
-        // load init value from DOM
-        ctrl.$setViewValue(elm.html());
+    <style type="text/css">
+      div[contentEditable] {
+        cursor: pointer;
+        background-color: #D0D0D0;
       }
-    };
-  });
-</script>
-
-<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
-<pre>model = {{content}}</pre>
-
-<style type="text/css">
-  div[contentEditable] {
-    cursor: pointer;
-    background-color: #D0D0D0;
-  }
-</style>
-</doc:source>
-</doc:example>
+    </style>
+  </file>
+
+  <file name="script.js">
+    angular.module('form-example2', []).directive('contenteditable', function() {
+      return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+          // view -> model
+          elm.on('blur', function() {
+            scope.$apply(function() {
+              ctrl.$setViewValue(elm.html());
+            });
+          });
+
+          // model -> view
+          ctrl.$render = function() {
+            elm.html(ctrl.$viewValue);
+          };
+
+          // load init value from DOM
+          ctrl.$setViewValue(elm.html());
+        }
+      };
+    });
+  </file>
+</example>
-- 
cgit v1.2.3