角度のあるフォームを送信するにはどうすればよいですか？

私は私の編集ページを持っていて、一度フィールドが編集されたら、DBに情報を提出したいと思っています。それは単純なもののようですが、私の状況に関係する良い例は見つけられません。これを解決するには、これは私のプロジェクトの最後の部分です。私はどんな提案もお願いします。私は3つのボタンを持っている私のページで角度のあるフォームを送信するにはどうすればよいですか？

<title> 

    </title> 
</head> 
<body ng-app="app" ng-controller="decontroller" class="container"> 

<div id="banner" style="text-align:center; margin-left:auto; margin- right:auto; display:block;"> 



</div> 


<h2></h2> 
<h3>Personal Information:</h3> 
<div id="validation-errors"> 
</div> 

<form action="" method="post" accept-charset="utf-8" ng-submit="addEdit()"> 
<table class="table table-bordered"> 
<tbody> 
    <tr> 
    <td>ParticipantID</td> 
    <td>{{edit.Stlc_id}}</td> 
</tr> 
<tr> 
    <td>First Name:<br> 
    </td> 
    <td>{{edit.First_Name}}</td> 
</tr> 
<tr> 
    <td>Last Name:<br> 
    </td> 
    <td>{{edit.Last_Name}}</td> 
</tr> 
<tr> 
    <td>Address:</td> 
    <td><input type="text" name ="Address" ng-model="edit.Address" ></td> 
</tr> 
<tr> 
    <td>Phone:</td> 
    <td><input size="20" name ="phone" ng-model="edit.Phone_Number" ></td> 
</tr> 
<tr> 
    <td>Assistive Devices:</td> 
    <td><input name ="AssistiveDevices" ng-model="edit.Assistive_Devices" ></td> 
</tr> 
<tr> 
    <td>Lanyard Code</td> 
    <td> 
    <input name ="Lanyard_Status" ng-model="edit.Lanyard_Status" /> </td> 
</tr> 
<tr> 
    <td>Comments</td> 
    <td> 
    <textarea cols="100" name="comments" ng-model="edit.Comments">.</textarea> 
    </td> 
</tr> 
<tr> 
    <td>Disenrolled</td> 
    <td><input name="disenrolled" ng-model="edit.Disenrolled" ></td> 
</tr> 
<tr> 
    <td>Deceased</td> 
    <td><input name="deceased" ng-model="edit.Deceased" ></td> 
</tr> 
</tbody> 
</table> 
</form> 

<h3>Days in Center<br></h3> 
<table class="table table-bordered"> 
<tbody> 
<tr> 
    <td>Monday</td> 
    <td>Tuesday</td> 
    <td>Wednesday</td> 
    <td>Thursday</td> 
    <td>Friday</td> 
</tr> 
<tr> 
    <td><input name="Attendance_Monday" ng-model="edit.Attendance_Monday" ></td> 
    <td><input name="Attendance_Tuesday" ng-model="edit.Attendance_Tuesday" ></td> 
    <td><input name="Attendance_Wednesday" ng-model="edit.Attendance_Wednesday" ></td> 
    <td><input name="Attendance_Thursday" ng-model="edit.Attendance_Thursday" ></td> 
    <td><input name="Attendance_Friday" ng-model="edit.Attendance_Friday" > </td> 
</tr> 
</tbody> 
</table> 

<h3>Transportation Types</h3> 
<table class="table table-bordered"> 
<tr> 
<td>Type of Transportation</td> 
<td>Approved For</td> 
<td>Comments</td> 
</tr> 
<tr> 
<td width="300px">Wheel Chair Van</td> 
<td><input name="WheelChair_Van" ng-model="edit.WheelChair_Van"></td> 
<td><textarea cols="100" name="WheelChair_Van comments" ng-model="edit.Comments" ></textarea></td> 
</tr> 
<tr> 
<td width="300px">Transit Van 240</td> 
<td><input name="TransitVan_240" ng-model="edit.TransitVan_240"></td> 
<td><textarea cols="100" name="TransitVan_240 comments" ng-model="edit.Comments" ></textarea></td> 
</tr> 
<tr> 
<td width="300px">Transit Van 360</td> 
<td><input name="TransitVan_360" ng-model="edit.TransitVan_360"></td> 
<td><textarea cols="100" name="TransitVan_360 comments" ng- model="edit.Comments"></textarea></td> 
</tr> 
<tr> 
<td width="300px">Subaru Impreza</td> 
<td><input name="Subaru_Impreza" ng-model="edit.Subaru_Impreza"></td> 
<td><textarea cols="100" name="Subaru_Impreza comments" ng- model="edit.Comments"></textarea></td> 
</tr> 
</table> 

<h3>Pick up and Drop Off Times</h3> 
<br> 
<table class="table table-bordered"> 
<tr> 
<td width="300px">Pick Up Time:</td><td><input type="text" name="Pick_Up_Time" value=""></td> 
</tr> 
<tr> 
<td width="300px">Drop off Time</td><td><input type="text" name="Drop_Off_Time" value=""></td> 
</tr> 
</table> 
<br> 

<h3>Personal Care Hours Pick Up/Drop Off</h3> 
<table class="table table-bordered"> 
<tbody> 
<tr> 
    <td>Monday</td> 
    <td>Tuesday</td> 
    <td>Wednesday</td> 
    <td>Thursday</td> 
    <td>Friday</td> 
    <td>Saturday</td> 
    <td>Sunday</td> 
</tr> 
<tr> 
    <td><input type="text" name="Monday_Pick_Up" ng-model="edit.Monday_Pick_Up" placeholder="Pick Up Time"></td> 
    <td><input type="text" name="Tuesday_Pick_Up" ng-model="edit.Tuesday_Pick_Up" placeholder="Pick Up Time"></td> 
    <td><input type="text" name="Wednesday_Pick_Up" ng-model="edit.Wednesday_Pick_Up" placeholder="Pick Up Time"></td> 
    <td><input type="text" name="Thursday_Pick_Up" ng-model="edit.Thursday_Pick_Up" placeholder="Pick Up Time"></td> 
    <td><input type="text" name="Friday_Pick_Up" ng-model="edit.Friday_Pick_Up" placeholder="Pick Up Time"></td> 
    <td><input type="text" name="Saturday_Pick_Up" ng-model="edit.Saturday_Pick_Up" placeholder="Pick Up Time"></td> 
    <td><input type="text" name="Sunday_Pick_Up" ng-model="edit.Sunday_Pick_Up" placeholder="Pick Up Time"></td> 
</tr> 
<tr> 
    <td><input type="text" name="Monday_Drop_Off" ng-model="edit.Monday_Drop_Off" placeholder="Drop Off Time"></td> 
    <td><input type="text" name="Tuesday_Drop_Off" ng-model="edit.Tuesday_Drop_Off" placeholder="Drop Off Time"></td> 
    <td><input type="text" name="Wednesday_Drop_Off" ng-model="edit.Wednesday_Drop_Off" placeholder="Drop Off Time"></td> 
    <td><input type="text" name="Thursday_Drop_Off" ng-model="edit.Thursday_Drop_Off" placeholder="Drop Off Time"></td> 
    <td><input type="text" name="Friday_Drop_Off" ng-model="edit.Friday_Drop_Off" placeholder="Drop Off Time"></td> 
    <td><input type="text" name="Saturday_Drop_Off" ng-model="edit.Saturday_Drop_Off" placeholder="Drop Off Time"></td> 
    <td><input type="text" name="Sunday_Drop_Off" ng-model="edit.Sunday_Drop_Off" placeholder="Drop Off Time"></td> 
    </tr> 
</tbody> 
</table> 
<input type="submit" name="submit" ng-click="saveEdit()" /> 

</form> 
<pre>{{edit | json}}</pre> 


<a href="http://localhost:8080/stlc/index.php/transport/list_show_data/transport_vi ew"> 
<button type="button" class="btn btn-primary">Back</button> 
</a> 

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script> 


<script type="text/javascript"> 
var app = angular.module('app',[]); 

    app.controller('decontroller', function($scope,$http){ 
    $scope.edit=<?php echo json_encode($aggregate_data_view);?>; 

    $scope.saveEdit = function(){ 
    console.log("hey i'm submitting!"); 
    console.log($scope.edit); 

    $http.post('?php echo site_url("index.php/transport/saveData")?>', $scope.edit). 
success(function(data){console.log(":)") }). 
error(function(data){ 
console.log(":(") 
}); 

}; 


}); 



</script> 

    </body> 
    </html> 



Here is my Controller: 


public function saveData() 
{ 


} 

it is empty now cause i really don't know what to do,nothing has worked.

出典

2016-10-21 GhostOne

：

これは私の編集ページのコードです。

<button data-ng-click="createAvl()">Create Avl</button> 
<button data-ng-click="create1000Avl()">Create 1000 Avl</button> 
<button data-ng-click="saveAvl()">Save Avl</button>

ngController：

app.controller("myCtrl", function ($scope, $http) {  
    $scope.avl = []; --here is where i save the avl 

    $scope.avl.push({ 
     'tracker_avl_id': getRandomArbitrary(0, 1000000, 1), 
     'plate_num': getRandomArbitrary(0, 10000, 1), 
     'x_lat': getRandomArbitrary(-69, -66, 0), 
     'y_long': getRandomArbitrary(8, 10, 0), 
     'azimuth': getRandomArbitrary(0, 359, 1), 
     'engine_status': engine, 
     'gps_fix': gps_fix, 
     'event_time': getRandomDate() 
    }); 

    $scope.saveAvl = function() { 
     $scope.ResponseDetails = 'Working...'; -- some variables to show progress 
     $scope.startDate = getDate(); 
     $scope.startTime = new Date().getTime(); 
     $scope.timeEllapsed = null; 

     -- use $.param jQuery function to serialize data from JSON 
     var data = $.param({ 
      avl_list: $scope.avl 
     }); 

     var config = { 
      headers: { 
       'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
      } 
     }   

     -- send the data to my webservice 
     $http.post('/AvlApi/putTrackerAVL', data, config) 
     .success(function (data, status, headers, config) {    
      var end = new Date().getTime() - $scope.startTime; 
      $scope.timeEllapsed = 'milliseconds passed: ' + end; 
      $scope.ResponseDetails = data; 
     }) 
     .error(function (data, status, header, config) { 
      $scope.ResponseDetails = "Data: " + data + 
       "<hr />status: " + status + 
       "<hr />headers: " + header + 
       "<hr />config: " + config; 
     }); 
    };

私のWebサービスがである最初の2秒1は

HTML DBにそのデータを保存するページにランダムAVLデータを作成しますIISを使用してC＃

[HttpPost] public JsonResult putTrackerAVL(List<avl> avl_list) { try { avl_list.ForEach(car => db.avl.Add(car)); db.SaveChanges(); } catch (Exception ex) { return Json(new { status = "Fail", message = ex.InnerException }); } return Json(new { status = "Success" }); }

出典

2016-10-21 17:35:07

Juan Carlosに感謝します。しかし、私はこれを私の例にどのように適用するのか分かりません。あなたは詳細を教えていただけますか？ – GhostOne

）A）あなたのhtmlページボタンを角度コントローラーの機能にバインドする必要があります。 'Save button' B）モデルをJSONデータに変換します。C）Webサービスにデータを送信します。 D）Webサービスが必要ですが、これは別の質問です。 –

角度のあるフォームを送信するにはどうすればよいですか？

答えて

関連する問題