Reputation: 253

close bootstrap modal window using angularjs after submit

I'm creating an inventory app, and the user has the option to add a new product or edit an existing one. Both options bring up the same modal window, and I want it to close automatically after the user clicks on submit.

Below is part of my code, my entire code is here: 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;
            };

    }        
};

Upvotes: 0

Answers (3)

Kiran

Reputation: 59

Fire button click on submit event in angularJS.

 <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();
}

Upvotes: 0