javascript - 在angularjs中动态添加新表单

Question

我是 angularjs 的新手，但我想要完成的任务如下。我有一个图像上传页面，用户可以在其中上传照片和有关照片的一些基本信息并异步提交数据。

我想要做的是在同一页面上有一个“添加另一张照片”按钮，当用户单击它时，它会在原始表单下显示另一个表单，他们可以添加另一张包含详细信息的照片。

我希望他们能够使用“添加另一张照片”按钮创建任意数量的新表单。我知道如何使用下划线模板在常规 JavaScript 中完成此操作，但是在 Angular 中执行此操作的正确方法是什么，每个表单也使用 AngularJS 指令，我希望在创建的每个新表单中也能使用该指令。

感谢您的时间和帮助!

Answer 1

您可以使用简单的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
    }];
}