添加字段的新行AngularJS NG-重复 [英] Adding new row of fields with AngularJS ng-repeat

问题描述

我想的第一行后添加字段的新行，当您点击添加新的参与者按钮。我已经看了几个来源，并随后建议，但首先与在code此NG重复，我的领域显示不出来。当我点击添加新的参与者什么也没有发生。不知道我有什么错在这里。

HTML：

 ＆LT;表类=COL-MD-12ID =客户表＆G​​T;
  ＆所述; TR＆GT;
    ＆LT; TD＆GT;＆LT; / TD＆GT;
    ＆LT; TD＆GT;给定名称* LT; / TD＆GT;
    ＆LT; TD＆GT;中间名＆LT; / TD＆GT;
    ＆LT; TD＆GT;姓*＆LT; / TD＆GT;
    ＆LT; TD＆GT;先天* LT日期; / TD＆GT;
    ＆LT; TD＆GT;民族性与LT; / TD＆GT;
    ＆LT; TD＆GT;性别与LT; / TD＆GT;
    ＆LT; TD＆GT;成人或学生＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
  ＆LT; TR数据-NG-重复=旅客旅行者＆GT;
    ＆LT; TD＆GT; 1＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;输入类型=文本占位符=赐名NG-模式=travelersForm.givenName/＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;输入类型=文本占位符=中间名NG模型=travelersForm.middleName/＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;输入类型=文本占位符=姓吴模型=travelersForm.lastName/＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;输入类型=日期级=日期选取器/＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;输入类型=文本占位符=国籍NG模型=travelersForm.nationality/＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;选择名称=性别ID =性别NG-模式=travelersForm.gender＆GT;
        ＆LT;期权价值=男性＆GT;男＆LT; /选项＆GT;
        ＆LT;期权价值=女＆GT;女＆LT; /选项＆GT;
      ＆LT; /选择＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
      ＆LT;选择名称=学生ID =学生NG-模式=travelersForm.types＆GT;
        ＆LT;期权价值=学生＆GT;学生＆LT; /选项＆GT;
        ＆LT;期权价值=成人＆GT;成人及LT; /选项＆GT;
      ＆LT; /选择＆GT;
    ＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
  ＆所述; TR＆GT;
    ＆所述; TD＆GT;
      ＆LT;按钮NG秀=showAddTraveler（旅行者）NG点击=addNewTraveler（）＆gt;添加新的参与者和LT; /按钮＆GT;
    ＆LT; / TD＆GT;
  ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

ANGULARJS

  angular.module（旅行者，[]）
  .controller（travelersController功能（$范围）{
    $ scope.travelersForm = {};
    $ scope.travelersForm.givenName =测试;
    $ scope.travelersForm.middleName =T;
    $ scope.travelersForm.lastName =测试;
    $ scope.travelersForm.nationality =白;
    $ scope.travelersForm.gender =男性;
    $ scope.travelersForm.types =成人;    $ scope.travelers = [];
    $ scope.addNewTraveler =功能（）{
      变种newItemNo = $ scope.travelers.length + 1;
      $ scope.travelers.push（{'ID'：'旅行者'+ newItemNo}）;
    };
    $ scope.showAddTraveler =功能（选择）{
      返回travelers.id === $ scope.travelers [$ scope.travelers.length-1] .ID;
    };
  }）;
 

解决方案

由于您的 NG-重复语法翻转：

修改

 数据-NG-重复=，在旅客出行＆GT;
 

要：

 数据-NG-重复=旅行者在旅行＆GT;
 

I am trying to add a new row of fields after the first row when you click the "Add New Participant" button. I've looked at a few sources and followed suggestions but first of all with this ng-repeat in the code, my fields do not show up. And when I click the "Add New Participant" nothing happens. Not sure what I've got wrong here.

HTML:

<table class="col-md-12" id="client-table">
  <tr>
    <td></td>
    <td>Given Name*</td>
    <td>Middle Name</td>
    <td>Last Name*</td>
    <td>Date of Birth*</td>
    <td>Nationality</td>
    <td>Gender</td>
    <td>Adult or Student</td>
  </tr>
  <tr data-ng-repeat="travelers in traveler">
    <td>1.</td>
    <td>
      <input type="text" placeholder="Given Name" ng-model="travelersForm.givenName"/>
    </td>
    <td>
      <input type="text" placeholder="Middle Name" ng-model="travelersForm.middleName"/>
    </td>
    <td>
      <input type="text" placeholder="Last Name" ng-model="travelersForm.lastName"/>
    </td>
    <td>
      <input type="date" class="date-picker"/>
    </td>
    <td>
      <input type="text" placeholder="Nationality" ng-model="travelersForm.nationality"/>
    </td>
    <td>
      <select name="gender" id="gender" ng-model="travelersForm.gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </td>
    <td>
      <select name="student" id="student" ng-model="travelersForm.types">
        <option value="student">Student</option>
        <option value="adult">Adult</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <button ng-show="showAddTraveler(traveler)" ng-click="addNewTraveler()">Add New Participant</button>
    </td>
  </tr>
</table>

ANGULARJS

angular.module("travelers", [])
  .controller("travelersController", function($scope) {
    $scope.travelersForm = {};
    $scope.travelersForm.givenName = "Test";
    $scope.travelersForm.middleName = "T";
    $scope.travelersForm.lastName = "Tester";
    $scope.travelersForm.nationality = "White";
    $scope.travelersForm.gender  = "male";
    $scope.travelersForm.types  = "adult";

    $scope.travelers = [];
    $scope.addNewTraveler = function() {
      var newItemNo = $scope.travelers.length+1;
      $scope.travelers.push({'id':'travelers'+newItemNo});
    };
    $scope.showAddTraveler = function(choice) {
      return travelers.id === $scope.travelers[$scope.travelers.length-1].id;
    };
  } );

解决方案

Because your ng-repeat syntax is flipped:

Change:

data-ng-repeat="travelers in traveler">

To:

data-ng-repeat="traveler in travelers">

这篇关于添加字段的新行AngularJS NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！