Нажатие кнопки angularJs в форме ошибочно обновляет страницу

Я пытаюсь реализовать при щелчке добавить новое поле ввода. Итак, есть 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>

person Community    schedule 19.08.2017    source источник
comment
Почему директива ng-app и директива ng-controller находятся в середине формы?   -  person georgeawg    schedule 19.08.2017
comment
Потому что я использую angular для этого конкретного div   -  person    schedule 20.08.2017
comment
Поместите директиву ng-app вне элемента form, чтобы скомпилировать директиву <form> и автоматически подавить обновление. Для получения дополнительной информации см. Директива формы AngularJS — отправка формы и предотвращение действия по умолчанию   -  person georgeawg    schedule 20.08.2017


Ответы (1)


По умолчанию type элемента button равно submit. Вот почему ваша форма отправляется. Чтобы избежать такого поведения, вы можете установить type на button, как в приведенном ниже коде.

Ссылки w3.org

Справочник по HTML-стандарту

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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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 type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" 
                            ng-click="addNewChoice()" >
                      add
                    </button>
                    <button type="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>

Надеюсь это поможет :)

person Manish    schedule 20.08.2017