我需要在使用angular.js提交表單後立即在現有表中添加數據。我在下面解釋我的代碼。使用angular.js提交表單後立即添加數據

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>

在這上面的代碼中一個現有的表已經存在，這是顯示從database.Here所有數據我的要求是，當用戶將輸入數據，然後點擊提交按鈕的提交的數據將與這些現有數據一起添加到此表中。請檢查我的控制器頁面。

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

請幫我解決這個問題。

來源

2015-09-28 satya

它不使用AJAX $一個很好的做法發送FD數據，你應該使用https://docs.angularjs.org/api/ngResource/service/$resource或$ http。 –

你可以發佈響應格式和數據嗎？ –

如果成功，追加用戶數據到

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

還有一項建議。不要像$scope.coursename那樣對每個值設置空值，而應使用ng-model，如ng-model="course.coursename"。所以你需要初始化$scope.course = {};。

而在Ajax成功之後，只需編寫$scope.course = {};即可。它會讓你的表單變空。

來源

2015-09-28 12:57:35 krishna

但是它會直接添加數據不會再訪問數據庫進行檢查。 – satya

所以從服務器您必須收到像{「狀態」：「成功」}。並檢查條件，如if（response.status ==='success'）{push userdata} – krishna

並且您在數據插入成功後推送userdata。所以沒有問題 – krishna

你應該添加到

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

$scope.courseData.push(response);

我也建議你使用$resource或$http。

https://docs.angularjs.org/api/ngResource/service/ $資源

來源

2015-09-28 13:01:19

@ Alvaro：響應是一些文本數據。響應不應該推送該數組。 – satya

確保回覆剛纔添加的新課程中的數據。 –

@satya響應可能是json格式。萬一可以使用'angular.fromJson' –

如果您爲多實體發送，嘗試

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

而且在$ http.post要求

來源

2015-09-28 14:40:21 krishna

使用angular.js提交表單後立即添加數據

course.html：

courseController.js：

回答

相關問題