diff options
| author | Julie | 2014-01-23 15:14:02 -0800 | 
|---|---|---|
| committer | Caitlin Potter | 2014-01-28 14:12:52 -0500 | 
| commit | ce37ae28687167f7b4274ba547f013980126a219 (patch) | |
| tree | b6e3164a0edad4a19f4afe298896178e6772103f /docs/content/cookbook/form.ngdoc | |
| parent | 95f0bf9b526fda8964527c6d4aef1ad50a47f1f3 (diff) | |
| download | angular.js-ce37ae28687167f7b4274ba547f013980126a219.tar.bz2 | |
docs(cookbook): remove the cookbook docs
The cookbook docs are now superceded by the guide. They are no longer available
in any menus and the only way to find them is to search for them. Remove!
Closes #5967
Diffstat (limited to 'docs/content/cookbook/form.ngdoc')
| -rw-r--r-- | docs/content/cookbook/form.ngdoc | 114 | 
1 files changed, 0 insertions, 114 deletions
| diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc deleted file mode 100644 index aaa49d2f..00000000 --- a/docs/content/cookbook/form.ngdoc +++ /dev/null @@ -1,114 +0,0 @@ -@ngdoc overview -@name Cookbook: Form -@description - -A web application's main purpose is to present and gather data. For this reason Angular strives -to make both of these operations trivial. This example shows off how you can build a simple form to -allow a user to enter data. - - -<doc:example> - <doc:source> -  <script> -    function FormController($scope) { -      var user = $scope.user = { -        name: 'John Smith', -        address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'}, -        contacts:[{type:'phone', value:'1(234) 555-1212'}] -      }; -      $scope.state = /^\w\w$/; -      $scope.zip = /^\d\d\d\d\d$/; - -      $scope.addContact = function() { -         user.contacts.push({type:'email', value:''}); -      }; - -      $scope.removeContact = function(contact) { -        for (var i = 0, ii = user.contacts.length; i < ii; i++) { -          if (contact === user.contacts[i]) { -            $scope.user.contacts.splice(i, 1); -          } -        } -      }; -    } -  </script> -  <div ng-controller="FormController" class="example"> - -    <label>Name:</label><br> -    <input type="text" ng-model="user.name" required/> <br><br> - -    <label>Address:</label><br> -    <input type="text" ng-model="user.address.line1" size="33" required> <br> -    <input type="text" ng-model="user.address.city" size="12" required>, -    <input type="text" ng-model="user.address.state" -           ng-pattern="state" size="2" required> -    <input type="text" ng-model="user.address.zip" size="5" -           ng-pattern="zip" required><br><br> - -    <label>Phone:</label> -    [ <a href="" ng-click="addContact()">add</a> ] -    <div ng-repeat="contact in user.contacts"> -      <select ng-model="contact.type"> -        <option>email</option> -        <option>phone</option> -        <option>pager</option> -        <option>IM</option> -      </select> -      <input type="text" ng-model="contact.value" required> -       [ <a href="" ng-click="removeContact(contact)">X</a> ] -    </div> -    <hr/> -    Debug View: -    <pre>user={{user | json}}</pre> -  </div> - - </doc:source> - <doc:scenario> -  it('should show debug', function() { -    expect(binding('user')).toMatch(/John Smith/); -  }); -  it('should add contact', function() { -    using('.example').element('a:contains(add)').click(); -    using('.example div:last').input('contact.value').enter('you@example.org'); -    expect(binding('user')).toMatch(/\(234\) 555\-1212/); -    expect(binding('user')).toMatch(/you@example.org/); -  }); - -  it('should remove contact', function() { -    using('.example').element('a:contains(X)').click(); -    expect(binding('user')).not().toMatch(/\(234\) 555\-1212/); -  }); - -  it('should validate zip', function() { -    expect(using('.example'). -      element(':input[ng\\:model="user.address.zip"]'). -      prop('className')).not().toMatch(/ng-invalid/); -    using('.example').input('user.address.zip').enter('abc'); -    expect(using('.example'). -      element(':input[ng\\:model="user.address.zip"]'). -      prop('className')).toMatch(/ng-invalid/); -  }); - -  it('should validate state', function() { -    expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className')) -      .not().toMatch(/ng-invalid/); -    using('.example').input('user.address.state').enter('XXX'); -    expect(using('.example').element(':input[ng\\:model="user.address.state"]').prop('className')) -      .toMatch(/ng-invalid/); -  }); - </doc:scenario> -</doc:example> - - -# Things to notice - -* The user data model is initialized {@link api/ng.directive:ngController controller} and is -  available in the {@link api/ng.$rootScope.Scope scope} with the initial data. -* For debugging purposes we have included a debug view of the model to better understand what -  is going on. -* The {@link api/ng.directive:input input directives} simply refer -  to the model and are data-bound. -* The inputs validate. (Try leaving them blank or entering non digits in the zip field) -* In your application you can simply read from or write to the model and the form will be updated. -* By clicking the 'add' link you are adding new items into the `user.contacts` array which are then -  reflected in the view. | 
