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, ...