Add data just after submitting the form using angular.js

Question

I need to add data in existing table just after submit the form using angular.js . I am explaining my code below.

course.html:

<form name="billdata" id="billdata" method="post" enctype="multipart/form-data">


                    <div id="SHOWDATA">
                    <div id="transactionsPortlet" class="panel-collapse collapse in">
                    <div class="portlet-body">
                    <div class="totalaligndiv">


                    <div class="col-md-6">


                                 <div class="input-group bmargindiv1 col-md-12">
                                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Course Name :</span>
                                <input type="text" name="itemname" id="coursemname" class="form-control" placeholder="Add course name" ng-model="coursename"  >
                                </div>


                                <div class="input-group bmargindiv1 col-md-12">
                                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Short name :</span>
                                <input type="text" name="itemname" id="shortmname" class="form-control" placeholder="Add short name" ng-model="course_short_name"  >
                                </div>  


                                </div>


                                <div class="col-md-6">


                                 <div class="input-group bmargindiv1 col-md-12">
                                <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Semester :</span>
                                 <select id="coy" name="coy" class="form-control" ng-model="semester" >
                                 <option value="">Select Semester</option>
                                 <option value="IV">IV</option>
                                 <option value="VI">VI</option>
                                 <option value="VIII">VIII</option>     
                                 </select>
                                </div>

                                </div>


                    <div class="clearfix"></div>    
                            <div style="text-align:center; padding-top:10px;">
                    <button class="btn btn-success" type="button" ng-click="addCourseData();">Submit</button>
                </div>

           <div class="clearfix"></div>           

                    </div>
                    </div>
                    </div>
                    </div>  

                    </form>
                        </div>
                    </div>
                    <!-- /.col-lg-12 -->

                </div>
            </div>





<div class="col-lg-12">
                                        <div class="portlet portlet-blue" style="margin-bottom:12px;">
<div class="portlet-body">
<div class="table-responsive dashboard-demo-table">
<table class="table table-bordered table-striped table-hover" id="dataTable">
<colgroup>
<col class="col-md-1 col-sm-1">
<col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-2 col-sm-2">
<col class="col-md-1 col-sm-1">
</colgroup>
  <thead>
<tr>
<th>Sl. No</th>
<th>Cource Name</th>
<th>Short Name</th>
<th>No of Semester</th>
<th>Edit</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="course in courseData">
<td>{{course.course_id}}</td>
<td>{{course.course_name}}</td>
<td>{{course.short_name}}</td>
<td >{{course.semester}}</td>
<td>
<a  href='#'  >
<input type='button' class='btn btn-xs btn-green'  value='Edit'   >  
</a>
</td>
</tr>   
</tbody>
</table>
</div>
</div>

In this above code one existing table is already there which is displaying all data from database.Here my requirement is when user will input the data and click on the submit button those submitted data will added in this table with those existing data.Please check my controller page.

courseController.js:

var courseApp=angular.module('GofastoHome');
courseApp.controller('coursecontroller',function($scope){
    $.ajax({
        type:'GET',
        url:"php/readCourseData.php",
        success: function(data){
            $scope.$apply(function(){
                $scope.courseData=angular.fromJson(data);
            });
        }
    })
    $scope.addCourseData=function(){
        if($scope.coursename==null){
            alert('course name field could not blank');
        }else if($scope.course_short_name==null){
            alert('short name field could not blank');
        }else if($scope.semester==null){
            alert('semester field could not blank');
        }else{
        var userdata={'course_name':$scope.coursename,'course_short_name':$scope.course_short_name,'semester':$scope.semester};
        console.log('userdata',userdata);
        $.ajax({
            type:'POST',
            url:"php/addCourse.php",
            data:userdata,
            success: function(response){
                $scope.$apply(function(){
                alert(response);
                $scope.coursename=null;
                $scope.course_short_name=null;
                $scope.semester=null;
                });
            },
            error: function(result){
                alert(result)
            }
        })
        }
    }
});

Please help me to resolve this issue.

Answer 1

In success, append userdata to

  $scope.courseData like $scope.courseData.push(userdata).

And one more suggestion. Instead of making null to each value like $scope.coursename , write in ng-model like ng-model="course.coursename" . So you need to initialize $scope.course = {}; .

And in success of Ajax, just write $scope.course = {}; . It will make your form empty.

Answer 2

Your should add to

$scope.courseData //will automatically update the table;

  $scope.courseData.push(response);

I also suggest you to use $resource or $http .

https://docs.angularjs.org/api/ngResource/service/ $resource

Answer 3

If you to send as multipart-entity, Try

var fd = new FormData();
fd.append('coursename', userdata.coursename);

And send fd as data in $http.post request