按鈕單擊僅適用一次
[英]Button click only works once
問題描述
我有一個按鈕，一旦點擊它就會在“forPassengers”div的末尾添加一個新的輸入元素，但它只能工作一次。 點擊一下就不再可以點擊了。
控制器：
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：
<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>
工作解決方案（編輯）
最終解決了我的問題的是實際使用AngularJS而不是通過document.getElementById函數訪問input元素。
2 個解決方案
解決方案1
2 已采納 2016-09-11 17:17:14
使用您的$ scope：
$scope.passengers = [];
$scope.addPassenger = function () {
$scope.passengers.push({});
};
然后使用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
它之所以有效的原因是angularJS在引擎蓋下做了相當多的魔術。 通過覆蓋對象的innerHTML，您可以從子節點擦除角度的綁定。
如建議使用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
Angular有一套非常好的工具來控制你的視圖合成以及模板：ng-repeat ng-show ng-hide ng-if
盡量避免自己修復DOM。
function 僅在單擊按鈕時有效
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.