dynamic forms

by bullrout

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
  <div class="input-append" ng-repeat="website in user.websites">
    <input type="url" ng-model="website.url">
    <button class="btn" ng-click="remove($index)">X</button>
  </div>
  <button class="btn btn-small" ng-click="add()">Add</button>

  <pre>{{user | json}}</pre>
</div>
  </body>

JavaScript

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.user = {
    websites: [
      {url: 'http://www.example.com'}
    ]
  };
  
  $scope.remove = function(index) {
    $scope.user.websites.splice(index, 1);
  };
  
  $scope.add = function() {
    $scope.user.websites.push({ url: ''});
  };
  
});