2015-10-15 38 views
1

我需要在單個用戶中使用Angular.js和PHP插入多行。首先我在下面解釋我的代碼。如何通過單個用戶使用PHP,Angular.js和MySQL提交多行插入值

爲time.html

<table class="table table-bordered table-striped table-hover" id="dataTable"> 
    <tr> 
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i> 
     <br>Day <i class="fa fa-long-arrow-down"></i> 
    </td> 
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour.time_slot"></td> 
    </tr> 
    <tbody id="detailsstockid"> 
    <tr ng-repeat="days in noOfDays"> 
     <td width="100" align="center" style=" vertical-align:middle" ng-bind="days.day"></td> 
     <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours"> 
     <table style="margin:0px; padding:0px; width:100%"> 
      <tr> 
      <td> 
       <select id="coy" name="coy" class="form-control" ng-model="sub_name " ng-options="sub.name for sub in listOfSubjectName track by sub.value"> 
       </select> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <select id="coy" name="coy" class="form-control" ng-model="fac_name " ng-options="fac.name for fac in listOfFacultyName track by fac.value"> 
       </select> 
      </td> 
      </tr> 
     </td> 
     </table> 
    </td> 
    </tr> 
</tbody> 
</table> 

上面的代碼部分是給UI上的以下輸出。點擊下面的鏈接查看輸出圖像。

Time table

timecontroller.js

$http({ 
    method: 'GET', 
    url: "php/timetable/gethour.php", 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
}).then(function successCallback(response){ 
     //console.log('hour',response.data); 
     $scope.hours=response.data; 
    },function errorCallback(response) { 
}); 
$http({ 
    method: 'GET', 
    url: "php/timetable/getdays.php", 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
}).then(function successCallback(response){ 
    $scope.days=response.data; 
     // console.log('days',$scope.days); 
     for (var i = 0; i < 5; i++) { 
     $scope.noOfDays.push($scope.days[i]); 
    } 
},function errorCallback(response) { 
}); 

在上圖中,你可以看到我有5天,一些時隙。我需要在這裏當用戶點擊任何提交按鈕時,所有選定的課程名稱數據,教師姓名數據,日期時間段將保存在數據庫中。讓我舉一個例子。假設用戶在第一行點擊提交按鈕,它將在第二行再次保存monday,09AM :: 10AM,course name,faculty name,這將節省monday,10AM :: 11AM,course name,faculty name等等。像這樣,它將在一次點擊中插入5*7=35行。請幫助我做到這一點。

回答

0

當我看你的代碼時,我看到你將選擇框綁定到「sub_name」和「fac_name」。我沒有測試過,但我認爲改變一個「sub_name」會更新所有的「sub_name」select,因爲它們都綁定到相同的模型。

首先你需要解決這個問題。我會製作一個大模型(稱爲「花名冊」),並在該模型中擁有每一天/ simeslot。

var roster = { 
    monday:[ 
     { 
      startTime: 9, 
      endTime: 10, 
      cource: 'courcename', 
      faculty: 'faculty name' 
     }, 
     { 
      startTime: 10, 
      endTime: 11, 
      cource: 'courcename2', 
      faculty: 'faculty name2' 
     }, 
     ....... 
    ] 
} 

比你可以看這個模型,當它改變你的http調用更新數據庫。您還可以找出實際更改的值,並只將這些更改推送到數據庫。

+0

@ JasperZelf:我不清楚你可以請一個jsfiddle/plunker例子通過採取任何虛擬數據,我會用數據庫測試這個結果。 – subhra

+0

@ JasperZelf:這裏$ scope.sub_name在選擇值之後顯示爲空。 – subhra

+0

@subhra:$ scope.sub_name不再存在,它被替換爲名冊對象。 如果你用你的代碼做一個jsfiddle,我可以給你一些指針,如果。 – JasperZelf