用 Angular js 克隆表单答案

【问题标题】：clone form with angular js用 Angular js 克隆表单
【发布时间】：2014-08-31 22:30:12
【问题描述】：

我正在尝试创建一个包含一些详细信息的表单，在表单末尾我尝试创建一个按钮“添加新表单”。此按钮将在底部克隆相同的表单，每个表单都有保存按钮。使用 angularjs 的最佳方法是什么？我怎么能用一个控制器做到这一点，所以它会知道我正在提交（保存）什么表单？

谢谢，

【问题讨论】：

标签： javascript forms angularjs

【解决方案1】：

您可以在控制器中定义表单并使用 ng-repeat 来呈现表单：

HTML：

<div ng-app="myApp" ng-controller="MyController">
    <div ng-repeat="form in forms">
        <hr/>
        <form name="myForm" ng-init="name = form.name">
            {{name}}
            <input name="myInput" type="text" ng-model="myInputValue"></input>
            <input type="button" value="Save" ng-click="saveForm(this)" ng-disabled="!myForm.$dirty"></input>
        </form>
    </div>
    <hr/>
    <input type="button" value="Create form" ng-click="createForm()"></input>
</div>

JS：

angular.module("myApp", []).controller('MyController', 
['$scope', function($scope){
    $scope.forms = [{name: "form1"}];

    $scope.createForm = function(){
        $scope.forms.push({name: "form" + ($scope.forms.length + 1)});
    };

    $scope.saveForm = function(formScope){
        alert("Save called for " + formScope.name + ", myInputValue = " + formScope.myInputValue);            
    };
}]

);

小提琴：http://jsfiddle.net/nfvjv0uv/2/

通常 formController 被分配给作用域，但 ng-repeat 会创建一个我们在 save 方法中提供的子作用域。

【讨论】：