Question

我正在创建广告资源应用，用户可以选择添加新产品或修改现有产品。两个选项都会显示相同的模态窗口，我希望它在用户点击提交后自动关闭。

以下是我的代码的一部分，我的整个代码在这里：http://codepen.io/andresq820/pen/LWGKXW

HTML

            <div class="modal fade" id="editItemModal" role="dialog">
            <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{title(item.code)}}</h4>
                </div>

            <div class="modal-body">
                <form name="myEditForm" ng-submit="editProduct(item)">
                    <div class="form-group">
                        <label for="code">Code:</label>
                        <input type="text" size="5" maxlength="5" minlength="3" class="form-control" name="code" id="code" 
                        ng-model="item.code" ng-disabled="false" ng-pattern="/^[a-zA-Z0-9]*$/">    
                        <span ng-show="myEditForm.code.$error.pattern">Code can only be alphanumeric.</span> </br> 
                        <span ng-show="myEditForm.code.$error.minlength">Code has to be at least 3 characters</span>
                    </div>

                    <div class="form-group">
                        <label for="description">Description:</label>
                        <input type="text" class="form-control" name="description" id="description" ng-model="item.description" required>  
                        <span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>   
                    </div>

                    <div class="form-group">
                        <label for="amount">Amount:</label>
                        <input type="number" class="form-control" name="amount" id="amount" size="5" maxlength="5" 
                        ng-model="item.amount" ng-pattern="/^[0-9]{1,7}$/">
                        <span ng-show="myEditForm.amount.$error.pattern">Only whole numbers are allowed</span>
                    </div>

                    <div class="form-group">
                        <label for="newImage">{{loadImg}}</label>
                        <input type="file" class="form-control" name="newImage" id="newImage" ng-model="item.image">
                    </div>



                    <div class="form-group" ng-show="displayRadioBtns">
                        <label for="radio">Type:</label>
                        <div class="radio">
                            <label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
                            <label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
                        </div>
                    </div> 

            <div class="modal-footer">
                <input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
                <input type="submit" class="btn btn-primary pull-right" value="Submit" ng-disabled="myEditForm.$invalid"/>
            </div>                
                </form>
            </div>
            </div>
            </div>
        </div>

ANGULARJS

 $scope.editProduct = function(item){
    var index = $scope.items.indexOf(item);
    console.log(index);
    console.log(item);
    console.log(item.code.valueOf());
    if(index == -1){
        console.log('new item');
        $scope.item.code = item.code;
        $scope.item.description = item.description;
        $scope.item.in = item.amount;
        $scope.item.out = 0;
        $scope.item.createdOn = Date.now();
        $scope.items.push($scope.item);
        $scope.item = {};

    }else{
        console.log('edit item');
        console.log(item);
        console.log(item.type);
        console.log($scope.item.type);
        console.log(index);
        $scope.items[index].code = item.code;
        console.log($scope.items[index].code);
        $scope.items[index].description = item.description;
        console.log($scope.items[index].description);
        $scope.items[index].image = item.image;


            if($scope.item.type == 'in'){
                console.log($scope.item.type);
                console.log(typeof($scope.items[index].in));
                console.log(typeof($scope.item.amount));
                console.log(typeof(item.amount));
                $scope.items[index].in += item.amount;
                console.log($scope.items[index].in);
                $scope.item = {};
            }else if($scope.item.type == 'out'){
                console.log($scope.item.type);
                $scope.items[index].out += $scope.item.amount;
                $scope.item = {};
            }else{
                alert("Type is a required field");
                return;
            };

    }        
};

Answer 1

您可以在ngSubmit上进行函数调用

form class =＆＃34; well＆＃34; （ngSubmit）=＆＃34; addUserModal.hide（）; ADDUSER（模型）; userForm.reset（）＆＃34; #userForm =＆＃34; ngForm＆＃34;

Answer 2

我还没有使用过AngularJS，但如果您能够使用jQuery，以下内容适用于Angular 2：

$(".modal").modal("hide")

Answer 3

触发按钮，单击angularJS中的Submit事件。

 <input id="quemodalcancel" type="submit" value="Cancel" class="btn blue_btn" data-dismiss="modal" aria-hidden="true">

 $scope.editProduct = function(item){
    // submit button code
   document.querySelector('#quemodalcancel').click();
}

提交后使用angularjs关闭bootstrap模态窗口

3 个答案: