CODEWITHSUNDEEP
javascriptangularjs
sxxxxxxx
sxxxxxxx

Reputation: 585

Exit modal after inputing data

After i submit my data from the form and click the submit button, I want the modal to close. What should i place in the $dtate.go so i can acheive the result that I want?

modal controller

 .controller('DietController', ['$scope', 'Diet', '$state', function($scope, Diet, $state) {
    $scope.diets = [];

    $scope.submitForm = function() {
      Diet
        .upsert({
          date: $scope.diet.date,
          food: $scope.diet.food
        })
        .$promise
        .then(function() {
          $state.go('diet');
        });
    };
  }])

modal html

<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
 aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">

        <!-- Modal Body -->
        <div class="modal-body">

            <form role="form">
              <div class="form-group">
                <label>Date</label>
                  <input class="form-control" type="date" ng-model="diet.date">
              </div>
              <div class="form-group">
                <label>Food Description</label>
                  <textarea type="text" class="form-control" ng-model="diet.food" placeholder="Enter food"></textarea>
              </div>

        <!-- Modal Footer -->
        <div>
            <button type="button" class="btn btn-primary" ng-click="submitForm()">
                Submit
            </button>
        </div>
        </form>
    </div>
</div>

Upvotes: 0

Views: 45

Answers (2)

mejiajuanbta
mejiajuanbta

Reputation: 176

Try this:

.then(function() {
     $('#myModalNorm').modal('hide');
});

Upvotes: 1

Blue
Blue

Reputation: 22911

If you're using the bootstrap modal, include $uibModalInstance and call the close method on it:

controller('DietController', ['$scope', 'Diet', '$state', '$uibModalInstance', function($scope, Diet, $state, $uibModalInstance) {
    $scope.diets = [];

    $scope.submitForm = function() {
      Diet
        .upsert({
          date: $scope.diet.date,
          food: $scope.diet.food
        })
        .$promise
        .then(function() {
          $uibModalInstance.close();
        });
    };
  }])

Upvotes: 0

Related Questions