如何使用PHP，Angular.js和MySQL通过单个用户提交在多行中插入值

Question

I need to insert multiple rows in a single user click using Angular.js and PHP. First I am explaining my code below.

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>

The above part of code is giving the following output on the UI. Click on below link see the output image.

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

In the above image, you can see I have 5 days and some time slot. I need here when user will click on any submit button all selected course name data, faculty name data, day time slot will save in database. Let me to given one example. Suppose user clicked on submit button in first row it will save monday,09AM :: 10AM,course name,faculty name again in second row it will save monday,10AM :: 11AM,course name,faculty name and so on. Like this way it will insert 5*7=35 row in one click. Please help me to do this.

Answer 1

When I look at your code I see you bind the select boxes to "sub_name" and "fac_name". I haven't tested it, but I think changing one "sub_name" will update all of the "sub_name" select's, as they are all bound to the same models.

First you will need to tackle this. I would make one big model (called "roster") and have each day/simeslot in that model.

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

Than you can watch this model, and when it changes do your http calls to update the DB. You could also figure out what values actually changed and only push these changes to the database.