dynamically adding new forms in angularjs

Question

I am new to angularjs, but what I am trying to accomplish is the following. I have an image upload page where the user can upload photos and some basic information about the photo and submit the data asynchronously.

What I want to do is have a "add another photo" button on the same page and when the user clicks it it shows another form under the original form and they can add another photo with details.

I want them to be able to create as many new forms as they want using the "add another photo" button. I know how i could accomplish this in regular javascript using underscore templates, but what is the correct method of doing this in angular, each form is also using angularjs directives which i would want to also work in every new form created.

Thanks for your time and help!

Langdon · Accepted Answer · 2013-05-26 18:46:08Z

1

You can handle that with a simple ngRepeat:

http://jsfiddle.net/f8B68/

HTML

<div ng-app ng-controller="x">
    <form ng-repeat="photo in photoUploads">
        <input type="file">
        <input type="submit">
    </form>
    <input type="button" ng-click="photoUploads.push({id: photoUploads.length + 1})" value="Upload More">{{photoUploads}}</div>

JavaScript

function x($scope) {
    $scope.photoUploads = [{
        id: 1
    }];
}

answered May 26, 2013 at 18:46

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vzhen Over a year ago

what if it is object object?

Collectives™ on Stack Overflow

dynamically adding new forms in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related