按钮单击仅适用一次
[英]Button click only works once
问题描述
I have a button which appends a new input element to the end of the "forPassengers" div once it's clicked, but it only works once. 
我有一个按钮，一旦点击它就会在“forPassengers”div的末尾添加一个新的输入元素，但它只能工作一次。 After one click it's not clickable anymore. 点击一下就不再可以点击了。
Controller: 控制器：
app
.controller('multipleFlightsController', function ($scope, $http, $location) {
$scope.addPassenger = function () {
document.getElementById('forPassengers')
.innerHTML += '<input class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false"> ';
};
/*..... more code*/
HTML: HTML：
<div id="forPassengers" class="col-lg-2 form-group">
<label># of other passengers</label>
<button id="buttonForPassenger" type="button" class="btnBlue" ng-click="addPassenger()">Add passenger</button>
<input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
<input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
</div>
WORKING SOLUTION (edit) 工作解决方案（编辑）
Eventually what solved my problem was actually using AngularJS instead of accessing the input element through the document.getElementById function. 最终解决了我的问题的是实际使用AngularJS而不是通过document.getElementById函数访问input元素。
2 个解决方案
解决方案1
2 已采纳 2016-09-11 17:17:14
Use your $scope: 使用您的$ scope：
$scope.passengers = [];
$scope.addPassenger = function () {
$scope.passengers.push({});
};
and then with ng-repeat: 然后使用ng-repeat：
<!-- use ng-repeat... -->
<input ng-repeat="passenger in passengers" class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false">
解决方案2
1 2016-09-11 17:26:38
Reason why it works once is that angularJS does quite a bit of magic under the hood. 它之所以有效的原因是angularJS在引擎盖下做了相当多的魔术。 And by overriding the innerHTML of the object you wipe the angular's bindings from the child nodes. 通过覆盖对象的innerHTML，您可以从子节点擦除角度的绑定。
use ng-repeat as was suggested. 如建议使用ng-repeat。
$scope.people = [];
$scope.addPassenger = function () {
// document.getElementById('forPassengers').innerHTML += '<input class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false"> ';
$scope.people.push({name:"person" + counter});
counter= counter + 1;
};
<body ng-controller="MainCtrl">
<div id="forPassengers" class="col-lg-2 form-group">
<label># of other passengers</label>
<button id="buttonForPassenger" type="button" class="btnBlue" ng-click="addPassenger()">Add passenger</button>
<input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
<input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#">
<input ng-repeat="person in people" class="form-control airport ng-pristine ng-untouched ng-valid" type="text" placeholder="#" tabindex="0" aria-invalid="false" ng-model="person.name">
https://plnkr.co/edit/nkigg8j7NBDmEdeLeU4t https://plnkr.co/edit/nkigg8j7NBDmEdeLeU4t
Angular has a very nice set of tools to control your view composition together with templates: ng-repeat ng-show ng-hide ng-if Angular有一套非常好的工具来控制你的视图合成以及模板：ng-repeat ng-show ng-hide ng-if
Try to avoid fixing DOM yourself. 尽量避免自己修复DOM。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.