javascript - 如何使用 PHP、Angular.js 和 MySQL 在单个用户提交的多行中插入值

Question

我需要使用 Angular.js 和 PHP 在单次用户点击中插入多行。首先，我在下面解释我的代码。

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 天和一些时间段。当用户单击任何提交按钮时，我需要在这里将所有选定的类(class)名称数据、教师姓名数据、日期时间段保存在数据库中。让我举一个例子。假设用户点击第一行的提交按钮，它会保存 monday,09AM::10AM,course name,faculty name 在第二行它会保存 monday,10AM::11AM,course name ,院名等。像这样它会插入 5*7=35 一键插入行。请帮我做这件事。

Answer 1

当我查看您的代码时，我看到您将选择框绑定(bind)到“sub_name”和“fac_name”。我还没有测试过，但我认为更改一个“sub_name”会更新所有“sub_name”选择，因为它们都绑定(bind)到相同的模型。

首先你需要解决这个问题。我会制作一个大模型(称为“花名册”)并在该模型中包含每一天/时间段。

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

你可以观察这个模型，当它发生变化时，你的 http 调用会更新数据库。您还可以找出实际更改了哪些值，并将这些更改仅推送到数据库。