user3055606
user3055606

Reputation: 65

AngularJS Http Post to API

When Add new User is clicked there will be a modal pop-up with form that include a text field and a checkbox.

When I click the create button it does not post the data to the API and also the modal pop-up remain there without closing.

I want the data to be posted to the API (insert), the modal pop-up to close after clicking on create and also the new user to be added to the List.

Please here is my code

$scope.createUser = function(){
        $http({
          method  : 'POST',
          url     : 'mydomain.com/api/CreateUser',
          data    : $scope.newUser,
          headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
         })
          .success(function() {});
  };


<div class="modal-body">

                  <form ng-submit="createUser ()">
                        <div class="form-group">
                            <div class="row" style="padding-left: 30px;">
                              <div class="col-xs-2">
                                <label>User Name</label>
                              </div>
                              <div class="col-xs-10">
                                <input type="text" class="form-control" placeholder="" ng-model="newUser.name">
                              </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="row" style="padding-left: 30px;">
                              <div class="col-xs-2">
                                <label>&nbsp;</label>
                              </div>
                              <div class="col-xs-10">
                                <input type="checkbox" name="active" ng-model="newUser.active"> &nbsp; Is active?
                              </div>
                            </div>

                        </div>


                        <div class="modal-footer">
                            <button class="btn btn-info" type="submit">Create</button>
                            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
                        </div>
                </form>
        </div>

Upvotes: 0

Views: 93

Answers (1)

Konkko
Konkko

Reputation: 662

Try this:

$http.post('mydomain.com/api/CreateUser', $scope.newUser).success(function(response) {
     console.log(response);
});

or

$http({
    method: 'POST',
    url: 'mydomain.com/api/CreateUser',
    headers: 
    {
        'Content-type': 'application/x-www-form-urlencoded',
    },
    data: 
        'name=' + $scope.newUser.name + 
        '&active=' + $scope.newUser.active
}).success(function(data, status) {
         console.log(data);
});

Upvotes: 2

Related Questions