templates/Cookbook/3-AdvancedForm.html.ep

   1 <script>
   2 function UserForm(){
   3   this.master = {
   4     name: 'John Smith',
   5     address:{
   6       line1: '123 Main St.',
   7       city:'Anytown',
   8       state:'AA',
   9       zip:'12345'
  10     },
  11     contacts:[
  12       {type:'phone', value:'1(234) 555-1212'}
  13     ]
  14   };
  15   this.cancel();
  16 }
  17
  18 UserForm.prototype = {
  19   cancel: function(){
  20     this.form = angular.copy(this.master);
  21   },
  22
  23   save: function(){
  24     this.master = this.form;
  25     this.cancel();
  26     alert('SAVED: ' + angular.toJson(this.master));
  27   }
  28 };
  29 </script>
  30 <div ng:controller="UserForm">
  31
  32   <label>Name:</label><br/>
  33   <input type="text" name="form.name" ng:required/> <br/><br/>
  34
  35   <label>Address:</label><br/>
  36   <input type="text" name="form.address.line1" size="33" ng:required/> <br/>
  37   <input type="text" name="form.address.city" size="12" ng:required/>,
  38   <input type="text" name="form.address.state" size="2" ng:required ng:validate="regexp:/^\w\w$/"/>
  39   <input type="text" name="form.address.zip" size="5" ng:required ng:validate="regexp:/^\d\d\d\d\d$/"/><br/><br/>
  40
  41   <label>Phone:</label>
  42   [ <a href="" ng:click="form.contacts.$add()">add</a> ]
  43   <div ng:repeat="contact in form.contacts">
  44     <select name="contact.type">
  45       <option>email</option>
  46       <option>phone</option>
  47       <option>pager</option>
  48       <option>IM</option>
  49     </select>
  50     <input type="text" name="contact.value" ng:required/>
  51      [ <a href="" ng:click="form.contacts.$remove(contact)">X</a> ]
  52   </div>
  53 <button ng:click="cancel()" disabled="{{master.$equals(form)}}">Cancel</button>
  54 <button ng:click="save()" disabled="{{$invalidWidgets.visible() || master.$equals(form)}}">Save</button>
  55
  56 <hr/>
  57 Debug View:
  58 <pre>form={{form}}
  59 master={{master}}</pre>
  60 </div>