current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

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!

share|improve this question
up vote 1 down vote accepted

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
    }];
}
share|improve this answer
    
what if it is object object? – vzhen Aug 7 '13 at 17:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.