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

Question

我正在研究 angular Project.I 有两个 div。在一个 div 中，有通过 ng-repeat 生成的动态输入。最初，两个输入将可用，但如果 euser 单击添加超过动态，将通过 ng-repeat 生成两个输入并且在另一个 div 中已经存在两个输入类型文本（不是通过 ng 生成-重复）。

我面临的问题是如何在 submit.Pls 上获取两个 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>

现在我想在 controller.How 中单击时获取 div 的所有详细信息，我可以实现吗？帮帮我。

谢谢你的期待。

Answer 1

如果可能，请将您的完整代码（js 代码）发送给我。或分享您的 js fiddle.I 将更改并与您分享。

<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)
}

Answer 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>

Answer 3

您只需在点击功能中使用 $scope.choice 对象即可。我对你的代码做了一些修改。在对象中添加新项目时，我用空字符串初始化了它们。此外，为第二个 div 初始化的 ng-model 使用 choice.firstname 和 choice.lastname 有点令人困惑。我只用 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>

Answer 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>

Answer 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>

详细示例在fiddlecheck this out

中给出

Answer 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>

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

How get data in controller of both ng-repeat field along with outside ng-repeat field

angularjs

ng-repeat

angularjs-scope

angularjs-ng-repeat