O'Reilly logo

Mastering Web Application Development with AngularJS by Pawel Kozlowski, Peter Bacon Darwin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Repeating subforms

Sometimes, we have fields in a form that needs to be repeated by an arbitrary number of times based on the data in the model. This is a common situation where you want to provide a single form that can display a one-to-many relationship in the data.

In our SCRUM app, we would like to allow users to have zero or more website URLs in their User Info profile. We can use an ngRepeat directive to set this up:

  <form ng-controller="MainCtrl">
  <h1>User Info</h1>
  <label>Websites</label>
  <div ng-repeat="website in user.websites">
    <input type="url" ng-model="website.url">
    <button ng-click="remove($index)">X</button>
  </div>
  <button ng-click="add()">Add Website</button>
</form>

The controller initializes the model and provides the helper functions, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required