在angularjs中动态添加新表单

dynamically adding new forms in angularjs

本文关键字：表单 新表单 添加 angularjs 动态      更新时间：2023-09-26

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

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

我希望他们能够创建尽可能多的新表单，因为他们想使用"添加另一张照片"按钮。我知道我如何在使用下划线模板的常规javascript中实现这一点，但是在angular中做这件事的正确方法是什么，每个表单也使用angularjs指令，我也想在每个新创建的表单中工作。

感谢您的时间和帮助!

您可以使用一个简单的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
    }];
}
相关文章：