Question

我正在开发角项目。我有两个div。在一个div中有动态输入，通过ng-repeat产生。最初，两个输入将可用，但如果euser单击添加多于动态，则将通过ng-repeat生成两个输入。在另一个div中，有两个输入类型文本已存在（不通过ng-repeat生成）。

我面临的问题是如何在submit.Pls上获取两个div输入的值，这有助于我如何在提交时立即获取所有数据。我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

现在我想在控制器中点击两个div的所有细节。我怎样才能做到这一点。帮助我。

在期待中感谢你。

Answer 1

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

TAB

Answer 2

以下是答案，根据您的要求进行更改。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

从自定义偏移量开始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

中给出

Answer 4

如果可能，请将您的完整代码（js代码）发送给我。或分享您的js小提琴。我将改变并与您分享。

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

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

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 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字段

6 个答案: