如何在 ng-repeat 字段和外部 ng-repeat 字段的控制器中获取数据答案

【问题标题】：How get data in controller of both ng-repeat field along with outside ng-repeat field如何在 ng-repeat 字段和外部 ng-repeat 字段的控制器中获取数据
【发布时间】：2017-05-30 22:06:55
【问题描述】：

我正在做 angular Project。我有两个 div。在一个 div 中有通过 ng-repeat 生成的动态输入。最初，两个输入将可用，但如果用户单击添加多于动态，则将通过 ng-repeat 生成两个输入并且在另一个 div 中已经存在两个输入类型文本（不是通过 ng-repeat 生成）。

我面临的问题是如何在提交时获取两个 div 输入的值。请帮助我解决如何在提交时一次获取所有数据。我的代码：

var addnew = angular.module('dump',[]);

addnew.controller('dumpcontroller', function($scope) 
{
  $scope.choices = [{id: 'choice1'}];
   $scope.addNewChoice = function() {
  var newItemNo = $scope.choices.length+1;
  $scope.choices.push({'id':'choice'+newItemNo});
  };


   $scope.removeChoice = function() {
      var lastItem = $scope.choices.length-1;
      $scope.choices.splice(lastItem);
   };
  });

<html>
  <head>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  </head>
<body ng-app="dump" ng-controller="dumpcontroller">      
<div class="divone" data-ng-repeat="choice in choices"> 
    <input type="text" placeholder="Name" ng-model="choice.childname">
    <input type="text" placeholder="Name" ng-model="choice.childbirth">
    <button ng-click="removeChoice()">-</button> //To remove the field dynamically.
</div>

 <button class="remove" ng-click="addNewChoice()">Add more</button> //To add the more childname and childbirth field.

<div class="divtwo">
    <input type="text" placeholder="Name" ng-model="choice.firstname">
   <input type="text" placeholder="Name" ng-model="choice.lastname">
</div>

<button type="button" id="submit" name="submit" ng-click="famupdate(choices)">Submit</button>
  
  </body>
  </html>

现在我想在控制器中单击时获取两个 div 的所有详细信息。我该如何实现这一点。帮帮我。

谢谢你的期待。

【问题讨论】：

在 plnkr 中分享您的代码。
我添加了sn-p
你想要两个在同一个数组中？
使用带偏移量的 ng-repeat，从 $index = 1 开始 ng-repeat，并在 div 2 中将该数组的第一个对象显示为静态
你能用一个例子解释一下或者修改我的sn-ps。感谢你在期待。 @EbinManuval

标签： angularjs angularjs-scope angularjs-ng-repeat ng-repeat

【解决方案1】：

如果可能的话，把你的完整代码（js 代码）发给我。或者分享你的 js fiddle。我会改变并与你分享。

<div class="divone" data-ng-repeat="choice in choices track by $index"> 
    <input type="text" placeholder="Name" ng-model="choice.childname[$index]">
    <input type="text" placeholder="Name" ng-model="choice.childbirth[$index]">
    <button ng-click="removeChoice()">-</button> //To remove the field      dynamically.
</div>

<button class="remove" ng-click="addNewChoice()">Add more</button> //To add the more childname and childbirth field.

<div class="divtwo">
   <input type="text" placeholder="Name" ng-model="choice.firstname">
  <input type="text" placeholder="Name" ng-model="choice.lastname">
</div>

<button type="button" id="submit" name="submit" ng-click="famupdate(choices,$index)">Submit</button>

var counter = 0;
$scope.choices = [];

for (var choice in $scope.choices) {
  var firstName = choice.firstName;
  var lastName = choice.lastName;
  var childname = choice.childName[counter];
  var childbirth = choice.childbirth[counter];
  counter++;
}

$scope.addNewChoice = function() {
    var obj = {'childName':'','childbirth':''}
    $scope.choices.push(obj)
}

【讨论】：

请看sn-p。我添加了动态输入重复的逻辑。我想要获取输入字段的所有值的逻辑。谢谢。

【解决方案2】：

我观察到的一件事是，您在 #div2 中选择了 "choice.firstname"，但正在收集选择。为了更简单，我采用了两种不同的模型来收集数据，然后将它们合并。试试下面

var addnew = angular.module('dump',[]);

addnew.controller('dumpcontroller', function($scope) 
{
  $scope.choices = [{id: 'choice1'}];
   $scope.addNewChoice = function() {
  var newItemNo = $scope.choices.length+1;
  $scope.choices.push({'id':'choice'+newItemNo});
     
  };

   $scope.removeChoice = function() {
      var lastItem = $scope.choices.length-1;
      $scope.choices.splice(lastItem);
   };
  
  $scope.famupdate = function (choices,choices2) {
    choices.push(choices2);
    console.log(choices);
  };
  
 });

<html>
  <head>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  </head>
<body ng-app="dump" ng-controller="dumpcontroller">      
<div class="divone" data-ng-repeat="choice in choices track by $index"> 
    <input type="text" placeholder="Name" ng-model="choices[$index].childname">
    <input type="text" placeholder="Name" ng-model="choices[$index].childbirth">
    <button ng-click="removeChoice()">-</button> //To remove the field dynamically.
</div>

 <button class="remove" ng-click="addNewChoice()">Add more</button> //To add the more childname and childbirth field.

<div class="divtwo">
    <input type="text" placeholder="Name" ng-model="choices2.firstname">
   <input type="text" placeholder="Name" ng-model="choices2.lastname">
</div>

<button type="button" id="submit" name="submit" ng-click="famupdate(choices,choices2)">Submit</button>
  
  </body>
  </html>

【讨论】：

【解决方案3】：

您只需在 click 函数中使用 $scope.choice 对象即可。我对你的代码做了一些修改。在对象中添加新项目时，我已经用空字符串初始化了它们。此外，使用choice.firstname 和choice.lastname 为第二个div 初始化的ng-model 有点令人困惑。我只用firstname 和lastname 替换了它们。请看这段代码。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var addnew = angular.module('dump', []);
        addnew.controller('dumpcontroller', function ($scope) {
            $scope.choices = [{
                id: 'choice1'
            }];
            $scope.addNewChoice = function () {
                var newItemNo = $scope.choices.length + 1;
                $scope.choices.push({
                    'childname': "",
                    'childbirth': ""
                });
            };
            $scope.removeChoice = function () {
                var lastItem = $scope.choices.length - 1;
                $scope.choices.splice(lastItem);
            };
            
            $scope.famupdate = function (choices){
                //No need to pass choices object actually. You can just use $scope.choices also.
                console.log("Data Generated Dynamically");
                console.log(choices);
                console.log("Data value in second div");
                console.log($scope.firstname);
                console.log($scope.lastname);
            }
        });
    </script>
</head>

<body ng-app="dump" ng-controller="dumpcontroller">
    <div class="divone" data-ng-repeat="choice in choices">
        <input type="text" placeholder="Name" ng-model="choice.childname">
        <input type="text" placeholder="Name" ng-model="choice.childbirth">
        <button ng-click="removeChoice()">-</button> //To remove the field dynamically.
    </div>

    <button class="remove" ng-click="addNewChoice()">Add more</button> //To add the more childname and childbirth field.

    <div class="divtwo">
        <input type="text" placeholder="Name" ng-model="firstname">
        <input type="text" placeholder="Name" ng-model="lastname">
    </div>

    <button type="button" id="submit" name="submit" ng-click="famupdate(choices)">Submit</button>

</body>

</html>

【讨论】：

【解决方案4】：

这是答案，根据您的要求更改。

var addnew = angular.module('dump',[]);

addnew.controller('dumpcontroller', function($scope) 
{
  $scope.choices = [{id: 'choice1', 'childname':'', 'childbirth':'', 'firstname':'', 'lastname':''}];
   $scope.addNewChoice = function() {
  var newItemNo = $scope.choices.length+1;
  $scope.choices.push({'id':'choice'+newItemNo, 'childname':'', 'childbirth':'','firstname':'','lastname':''});
  };


   $scope.removeChoice = function() {
      var lastItem = $scope.choices.length-1;
      $scope.choices.splice(lastItem);
   };
  $scope.famupdate = function(){  
   console.log($scope.choices);
  }
  });

<html>
  <head>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  </head>
<body ng-app="dump" ng-controller="dumpcontroller">   
  <form name="sform">
<div class="divone" data-ng-repeat="choice in choices"> 
    <input type="text" placeholder="Name" ng-model="choice.childname">
    <input type="text" placeholder="Name" ng-model="choice.childbirth">
   <button class="remove" ng-click="addNewChoice()">Add more</button> //To add the more childname and childbirth field.
  
    <a ng-click="removeChoice()">Remove</a> //To remove the field dynamically.


<div class="divtwo">
    <input type="text" placeholder="FirstName" ng-model="choice.firstname">
   <input type="text" placeholder="LastName" ng-model="choice.lastname">
</div>
</div>
<button type="button" id="submit" name="submit" ng-click="famupdate(choices)">Submit</button>
  </form>
  {{choices}}
  </body>
  </html>

【讨论】：

【解决方案5】：

从自定义偏移量开始ng-repeat，这样您就可以在同一个数组中获得两者

<div ng-repeat="choice in choices | limitTo: (1 - choices.length)">
 ....
</div>
<div class="divtwo">
   <input type="text" placeholder="Name" ng-model="choices[0].firstname">
  <input type="text" placeholder="Name" ng-model="choices[0].lastname">
</div>

详细示例在小提琴check this out中给出

【讨论】：

【解决方案6】：

var addnew = angular.module('dump',[]);

addnew.controller('dumpcontroller', function($scope) 
{
  $scope.choices = [{id: 'choice1'}];
 $scope.choi = {};
   $scope.addNewChoice = function() {
  var newItemNo = $scope.choices.length+1;
  $scope.choices.push({'id':'choice'+newItemNo});
  };


   $scope.removeChoice = function() {
      var lastItem = $scope.choices.length-1;
      $scope.choices.splice(lastItem);
   };

  $scope.famupdate = function(){
  for(var i=0;i<$scope.choices.length;i++){
   var childName = $scope.choices[i].childname;
   var childbirth = $scope.choices[i].childbirth;
   console.log('childName:',$scope.choices,childName,childbirth)
  }
  var firstName = $scope.choi.firstName;
  var lastName = $scope.choi.lastName;
  }
  });

<html>
  <head>
    <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  </head>
<body ng-app="dump" ng-controller="dumpcontroller">      
<div class="divone" data-ng-repeat="choice in choices track by $index"> 
    <input type="text" placeholder="Name" ng-model="choice.childname">
    <input type="text" placeholder="Name" ng-model="choice.childbirth">
    <button ng-click="removeChoice()">-</button> //To remove the field dynamically.
</div>

 <button class="remove" ng-click="addNewChoice()">Add more</button> //To add the more childname and childbirth field.

<div class="divtwo">
    <input type="text" placeholder="Name" ng-model="choi.firstname">
   <input type="text" placeholder="Name" ng-model="choi.lastname">
</div>

<button type="button" id="submit" name="submit" ng-click="famupdate(choices)">Submit</button>
  
  </body>
  </html>

【讨论】：