フォームとクローンのクローニングフォームのクローン化

私はいくつかのフィールドと2つのボタンを持つフォームを持っています.1つは完全なフォームをクローンし、もう1つはフォームフィールドのみをクローンすることを意図しています。 ng-repeatを試してみましたが、フォームをクローンして元のフォームにフィールドをクローンしようとすると、クローンフォームのフィールドもクローン化されました。重複した形式で複製を制限する方法。これは私のHTMLフォームとクローンのクローニングフォームのクローン化

<!DOCTYPE html> 
    <html> 
     <head> 
    <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
<link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <div ng-app="myApp" ng-controller="MyController"> 
     <div ng-repeat="form in forms"> 
     <hr /> 
     <form name="myForm" ng-init="name = form.name"> 
      <br> 

      <div ng-repeat="user in users"> 
      <input type="text" ng-model="user.name"/> 
      <input type="text" ng-model="user.phone"/> 
      </div><br> 
      <button type="button" href="" ng-click="addUser()">Add user</button> 
     </form> 
     </div> 
     <hr /> 
     <input type="button" value="Create form" ng-click="createForm()" /> 
    </div> 
    </body>  
</html>

であり、ここでここに私の `script.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);    
    }; 
    $scope.users = [{name: 'John',phone: '098097770'},{name: 'Alice',phone: '765876598'}]; 
    $scope.addUser = function() { 
    $scope.users.push({name: 'New user',phone: ''}); 
    }; 
    $scope.submit = function() { 
    alert('Here are the users: ' + angular.toJson($scope.users)); 
    }; 
}]);

Plnkr Demo

出典

2017-06-29 Satish Patel

を追加する必要があるため、フォームのインデックスを渡す必要がアドユーザーのための1つの関数呼び出しがありますフォームとクローンのフォームフィールドのみのクローンを意味しますか？それを得ていなかった –

@ RahulArora plnkrのデモを確認してください。問題は、フォームを複製した後で、私は両方のフォームではなく、それぞれのフォームでのみユーザーを追加したい。 –

助けがあれば私の答えをチェックしてください –

では作業plnkrです： plnkr

は基本的に、あなたがリンクする必要がありますuserをformオブジェクトとすると、各f orm。

NGリピートにいくつかの変更（ネストされたもの）と、ユーザーがあなたが何をすべきか

$scope.forms = [ 
     { 
     name: "form1", 
     users: [ 
      {name: 'John',phone: '098097770'}, 
      {name: 'Alice',phone: '765876598'} 
      ] 
     } 
    ]; 
    $scope.createForm = function(){ 
     $scope.forms.push({ 
      name: "form" + ($scope.forms.length + 1), 
      users: [ 
      {name: 'John',phone: '098097770'}, 
      {name: 'Alice',phone: '765876598'} 
      ] 
     }); 
    }; 
    $scope.saveForm = function(formScope){ 
     alert("Save called for " + formScope.name + ", myInputValue = " + formScope.myInputValue);    
    }; 

    $scope.addUser = function(index) { 
    $scope.forms[index].users.push({name: 'New user',phone: ''}); 
    };

出典

2017-06-29 14:01:34

フォームとクローンのクローニングフォームのクローン化

答えて

関連する問題