angularJs 表单中的按钮点击错误刷新页面

Question

我正在尝试实现点击添加新输入 field.So，有 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>

angular 脚本

<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>

Answer 1

button 元素的默认 type 是 submit。这就是您提交表单的原因。为了避免这种行为，您可以将 type 设置为 button，如下面的代码所示。

References w3.org

Reference Html Standard

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>

希望这对您有所帮助:)

angularJs 表单中的按钮点击错误刷新页面

angularJs button click in form erroneously refreshing page

javascript

angularjs

angularjs-ng-form

angular-forms

index.php

angular 脚本