Question

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

谢谢，

Answer 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方法中提供的子范围。

克隆形式与角js

1 个答案: