AngularJS Example

by epinapala

HTML

<div ng-controller="SettingsController">
    Contact:
    <ul>
      <li ng-repeat="contact in contacts">
        <select ng-model="contact.type">
           <option>phone</option>
           <option>email</option>
        </select>
        <input type="text" ng-model="contact.value"/>
        [ <a href="" ng-click="clearContact(contact)">clear</a>
        | <a href="" ng-click="removeContact(contact)">X</a> ]
      </li>
      <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
   </ul>
  </div>

JavaScript

function SettingsController($scope) {
  $scope.name = "John Smith";
  $scope.contacts = [
    {type:'phone', value:'408 555 1212'},
    {type:'email', value:'[email protected]'}];

  $scope.greet = function() {
   alert($scope.name);
  };
   
  $scope.addContact = function() {
   $scope.contacts.push({type:'email', value:'[email protected]'});
  };

  $scope.removeContact = function(contactToRemove) {
   var index = $scope.contacts.indexOf(contactToRemove);
   this.contacts.splice(index, 1);
  };

  $scope.clearContact = function(contact) {
   contact.type = 'phone';
   contact.value = '';
  };
}