onClick新输入框添加不工作angularJs问题

时间:2017-08-18 12:47:10

标签: javascript angularjs

我想使用PHP在数据库中添加动态表单字段。我使用angular来添加动态表单字段。问题是,当我尝试将此数据插入数据库时​​,只有最后一个表单字段插入数据库中。所以,我使用数组和循环来递增并将此表单字段更新到数据库中。但不知怎的,查询工作不正常,数据也没有插入数据库。你能告诉我这里有什么问题吗?我被卡住了。请帮忙。提前完成。

这是我的代码:

    <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

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

2 个答案:

答案 0 :(得分:0)

试试这个:

<button type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold 
c-btn-square" ng-click="addNewChoice()"> add</button>

您应该始终指定按钮类型,否则,它将默认提交,这就是刷新页面的原因。

希望这有帮助

答案 1 :(得分:0)

你可以做的只是输入输入类型并输入类型=&#34;按钮&#34;。它不会刷新您的页面。您没有指定任何类型的原因,为什么它采取类型=&#34;提交&#34;并且整个页面正在重新加载。所以避免这种情况。