Angular Form

learning angular

by SnakeFox

HTML

<!doctype html>
<html ng-app>
    <head>
        <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0rc8.min.js"></script>
    </head>
    <body>
        <div ng-controller="FormCntl" >
            <form name="myForm">
               <fieldset>
                   <legend>Personal Data</legend>
            <label>Name:</label><br>
            <input type="text" ng-model="user.name"/><br><br>
            <label>ZipCode:</label><br>
            <input type="text" ng-model="user.zipcode"/>           
              </fieldset>
            <hr/>
            [<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>
                </select>
                <input type="text" ng-model="contact.value">
                [<a href="" ng-click="removeContact(contact)">x</a>]<br>
            </div>
    <br>
        Debug View:
        <pre>user={{user|json}}</pre>
        </form>            
        </div>
    </body>    
</html>

JavaScript

function FormCntl($scope){
    $scope.user = {
        name :'Rolando',
        zipcode :'90210',
        contacts : [
            {type: 'phone',value:'32131231333'},
            {type:'email',value:'[email protected]'}
        ]
    };
    
    $scope.addContact = function(){
        $scope.user.contacts.push({type:'email',value:''});
    };

    $scope.removeContact = function(contact){
        for (var i = 0, ii = this.user.contacts.length; i < ii; i++){
            if (contact === this.user.contacts[i]){
                $scope.user.contacts.splice(i,1);
            }
        }
    };
}