Javascript 在angularjs中以各自的形式克隆表单和克隆字段_Javascript_Angularjs

Javascript 在angularjs中以各自的形式克隆表单和克隆字段

javascript angularjs

Javascript 在angularjs中以各自的形式克隆表单和克隆字段,javascript,angularjs,Javascript,Angularjs,我有一个表单，它有一些字段和两个按钮，其中一个是克隆完整表单，另一个是只克隆表单字段。我尝试了ng repeat，但是当我克隆表单，然后尝试以原始表单克隆字段时，它也会克隆克隆克隆表单中的字段。如何限制复制表单中的克隆。这是我的HTML <!DOCTYPE html> <html> <head> <script data-require="angular.js@1.6.1" data-semver="1.6.1" s

我有一个表单，它有一些字段和两个按钮，其中一个是克隆完整表单，另一个是只克隆表单字段。我尝试了

ng repeat

，但是当我克隆表单，然后尝试以原始表单克隆字段时，它也会克隆克隆克隆表单中的字段。如何限制复制表单中的克隆。这是我的HTML

    <!DOCTYPE html>
    <html>
      <head>
    <script data-require="angular.js@1.6.1" 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>

以下是工作plnkr：

基本上，您需要将

用户

与

表单

对象链接起来，以便每个表单都具有唯一性

将对ng repeat（嵌套的）进行一些更改，并对addUser进行一次函数调用，您需要传递需要添加用户的表单的索引

$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: ''});
  };

以下是工作plnkr：

基本上，您需要将

用户

与

表单

对象链接起来，以便每个表单都具有唯一性

将对ng repeat（嵌套的）进行一些更改，并对addUser进行一次函数调用，您需要传递需要添加用户的表单的索引

$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: ''});
  };

克隆表单与仅克隆表单字段是什么意思？没有得到it@RahulArora请查看plnkr演示。问题是克隆表单后，我只想在相应的表单中添加用户，而不是在两个表单中都添加用户。请检查我的答案是否有帮助克隆表单与仅克隆表单字段是什么意思？没有得到it@RahulArora请查看plnkr演示。问题是克隆表单后，我只想在相应的表单中添加用户，而不是在两个表单中都添加。如果有帮助，请检查我的答案