2014-07-10 136 views
-2

我想創建一個窗體的一些細節,在窗體的結尾我試圖創建一個按鈕「添加新窗體」。此按鈕將在底部克隆相同的表單,每個表單都有保存按鈕。 用angularjs做什麼最好的方法是什麼?我怎樣才能用一個控制器做到這一點,所以它會知道我在做什麼形式提交(保存)?克隆形式與角js

感謝,

回答

2

您可以在控制器定義形式的數組,並使用NG重複呈現形式:

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-重複創建我們在保存方法提供子範圍。