2016-10-21 6 views
0

편집 페이지가 있는데 일단 필드 편집이 완료되면 DB에 정보를 제출하고 싶습니다. 단순한 것으로 보이지만 상황에 맞는 좋은 예를 찾을 수 없습니다. 이 문제를 해결하기 위해 이것은 내 프로젝트의 마지막 부분입니다. 제발 어떤 제안을 주셔서 감사합니다. 나는 세 개의 버튼이 내 페이지에서 각도 모양을 어떻게 제출합니까?

<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. 

답변

0

:

이 내 편집 페이지 코드입니다. 첫 번째 두 번째는 DB에 데이터를 저장 페이지 에 임의 AVL 데이터를 생성 HTML

:

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

내 Webservice를이에 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" }); 
} 
+0

후안 카를로스에게 감사드립니다.하지만 어떻게하면 제 예제에이를 적용 할 수 있을지 모르십니까? 정교하게 제발 주시겠습니까? – GhostOne

+0

A) 각도 컨트롤러의 기능에 html 페이지 버튼을 바인딩해야합니다. 'Save button' B) JSON 데이터로 모델 변환 C) 웹 서비스로 데이터 보내기. D) 웹 서비스가 필요하지만 다른 질문입니다. –

관련 문제