CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
CodeMonkeyB
CodeMonkeyB

Reputation: 3070

dynamically adding new forms in angularjs

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!

Upvotes: 1

Views: 1473

Answers (1)

Langdon
Langdon

Reputation: 20073

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
    }];
}

Upvotes: 1

Related Questions