Я пытаюсь реализовать при щелчке добавить новое поле ввода. Итак, есть 2 кнопки для добавления и удаления поля ввода. После нажатия кнопки «Добавить» он должен добавить набор полей ввода, а при нажатии кнопки «Удалить» он должен удалить конкретный ввод коробка. Но при нажатии кнопки «Добавить» добавляется только 1 поле ввода и обновляется вся страница, и данные формы этой страницы отображаются в строке поиска, но с другой стороны кнопка удаления работает нормально. Обе функции правильные, я думаю, но я не понимаю, что не так? Что я делаю? Я не хочу, чтобы кнопка добавления обновляла страницу и отображала данные в строке поиска. И он должен добавить много полей ввода после нажатия на него. Что нужно сделать здесь. пожалуйста помоги!!
Вот мой код:
index.php
<form method="post">
<div class="form-group " >
<input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
<div class="row col-md-12">
<div class="form-group col-md-6">Start Date
<input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
</div>
<div class="form-group col-md-6">End Date
<input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
</div>
<div class="row col-md-12">
<div class="form-group">
<label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
<div class="col-md-6 c-margin-b-20">
<select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
</div>
</div>
<div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<label for="inputPassword3" class="col-md-1 control-label">Elements</label>
<div class="form-group col-md-3 ">
<input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele">
</div>
<label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
<div class="form-group col-md-3" >
<select class="form-control c-square c-border-2px c-theme" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
<button class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square"
ng-click="addNewChoice()" >
add
</button>
<button ng-show="$last" ng-click="removeChoice()"
class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >
Remove
</button>
</fieldset>
</div>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
</div>
<input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">
</form>
угловой скрипт
<script type="text/javascript">
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
ng-app
и директиваng-controller
находятся в середине формы? - person georgeawg   schedule 19.08.2017ng-app
вне элементаform
, чтобы скомпилировать директиву<form>
и автоматически подавить обновление. Для получения дополнительной информации см. Директива формы AngularJS — отправка формы и предотвращение действия по умолчанию - person georgeawg   schedule 20.08.2017