当您单击“添加新参与者”按钮时,我尝试在第一行之后添加一行新字段。我已经查看了几个来源并遵循了建议,但首先在代码中使用了ng-repeat,我的字段没有显示出来。当我点击“添加新参与者”时,没有任何反应。不知道我在这里遇到了什么问题。
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;
};
} );
答案 0 :(得分:2)
因为您的ng-repeat
语法被翻转了:
变化:
data-ng-repeat="travelers in traveler">
要:
data-ng-repeat="traveler in travelers">