AngularJS Tutorial - ng-repeat to create form input element








The following code shows how to use ng-repeat to create form input element.

Example


<!doctype html>
<html ng-app="myApp" >
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script>
var app = angular.module('myApp', []);
<!--from   w  w  w. ja  va2 s .c  om-->
app.controller('MainCtrl', function($scope) {
  $scope.user = {
    websites: [
      {url: 'http://www.example.com'},
      {url: 'http://www.java2s.com'}
    ]
  };
  
  $scope.remove = function(index) {
    $scope.user.websites.splice(index, 1);
  };
  
  $scope.add = function() {
    $scope.user.websites.push({ url: ''});
  };
  
});
  
  </script>
</head>
<body 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>
</body>
</html>

The code above is rendered as follows: