Angular Add New Row

by Muhammad Irfan Khan

HTML

<div ng-app="controllerExample">
        <div id="ctrl-exmpl" ng-controller="SettingsController2">
            Name: <input type="text" ng-model="name" />
            [ <a href="" ng-click="greet()">greet</a> ]<br />
            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>
    </div>

JavaScript

angular.module('controllerExample', [])
  .controller('SettingsController2', ['$scope', SettingsController2]);

function SettingsController2($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);
    $scope.contacts.splice(index, 1);
  };

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