javascript - 按钮点击只有效一次

Question

我有一个按钮，一旦单击它，它就会将一个新的输入元素附加到“forPassengers”div 的末尾，但它只能工作一次。单击后，它就不能再单击了。

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:

<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 函数访问输入元素。

Answer 1

使用你的 $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">