Question

我试图在点击时添加一个新的输入字段。所以，点击添加按钮后有2个按钮添加和删除输入框，它应该添加一组输入框，点击删除按钮，它应该删除特定的输入框。但是点击＆＃34;添加＆＃34;它只添加1个输入字段并刷新整个页面，该页面的表单数据显示在搜索栏中，但在另一侧＆＃34;删除＆＃34;按钮工作正常。这两个功能都是正确的我猜，但我不明白什么是错的？我该怎么办？我不想要添加按钮来刷新页面并在搜索栏中显示数据。点击它后必须添加许多输入框。这里需要做些什么。请帮助!!

这是我的代码：

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

Answer 1

type元素的默认button为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按钮单击窗体错误刷新页面

的index.php

角度脚本

1 个答案: