javascript - 使用 php 和 angularjs 在数据库中插入多个选定的复选框值

Question

我有一个带有复选框、文本框和单选按钮的 html 表单。单击“保存”按钮时，表单数据将插入到数据库中。我正在使用 angularjs Controller 来获取表单数据并使用 PHP 插入到 mysql 中。

问题:如何在 Controller 和 PHP 中插入选定的复选框值？用代码示例向我解释一下。

下面是我的代码:

html 代码:

 <form class=rform align="center">
 <b>Product Name:<input type="text" name="name" ng-model="newProduct.name" required=""/><br>
 Product Category: <select name="catg" ng-model="newProduct.catg" ng-options="x for x in catg" ></select><br>
 TAGS : <br>
<ul>
<li ng-repeat="tag in tags">
  <input type="checkbox" name="tags" ng-model="newProduct.tags" value="tag" ng-true-value="tag"> {{tag}}
</li>
</ul>
<Status :<br><br>
<input type="radio"  ng-model="newProduct.stat" value="Active">Active
<input type="radio"  ng-model="newProduct.stat" value="Deactive">Deactive<br><br>
<input type="hidden" ng-model="newProduct.id" /></b>
<div class="btn"> <button type="submit"  ng-disabled="rform.$invalid" ng-click="saveRecord(newProduct)">Save</button></div>
</form>

app.js

   app.controller('ProductCtrl',function($scope,$http){
   $scope.tags = ["Appliances","Electronics","Men&Women","Others"] ;

   $scope.catg = ["mobile","Air Conditioner","Kitchen appliances","Footwear","SportsWear","clothes",
              "watches","Lptops","Televisions","Camera","Furniture","Kitchen Dining","Music","Stationery"];

  $scope.saveRecord = function (newProduct) {
  $http.post("php/pinsert.php",{
                     'name' : $scope.newProduct.name,
                     'catg' : $scope.newProduct.catg,
                     'tags' : $scope.newProduct.tags,
                     'stat' : $scope.newProduct.stat
                   })

                    // data:$scope.products,

                      .success(function(data){  
                               alert(data);  
                      })

                 angular.forEach($scope.tags, function(tag){
                 if (tag.selected) $scope.albumNameArray.push(tag.name);
                 tag.selected= false ;
                  });

                 tag.selected= false ;
    }

    $http.get("php/pselect.php").then(function (response) {
  $scope.myproducts = response.data.records;
 });


});

PHP:

     <?php 

    $connect = mysqli_connect("localhost", "root", "","user");
    $data = json_decode(file_get_contents("php://input"));


$p_name = mysqli_real_escape_string($connect, $data->name);
$p_catg = mysqli_real_escape_string($connect, $data->catg);
$tags = mysqli_real_escape_string($connect, $data->tags);
$status = mysqli_real_escape_string($connect, $data->stat);

$query = "INSERT INTO products(pname,pcatg,tag,status)  VALUES ('$p_name','$p_catg','$tags','$status')";
$result = mysqli_query($connect, $query) ;
if($result == TRUE) 
  {  
       echo "Data Inserted...";  
  }  
  else  
  {  
       echo 'Error';  
  }  

 ?>

Answer 1

我会同样重组你的标签数组。如果选中该复选框，则所选属性将设置为 true。该名称只是为了显示。

$scope.tags = [
    {"selected":false, "name":"Appliances"},
    {"selected": false, "name":"Electronics"},
    {"selected":false, "name":"Men&Women"},
    {"selected":false, "name":"Others"}
]; 

复选框的标记也应该重新构建。请注意，ng-model 使用 $scope.newProduct.tags 的 .selected 属性。该设置允许您查看保存到数据库时选择了哪些标签属性。

<li ng-repeat="tag.name for tag in tags"> 
    <input type="checkbox" name="tags" ng-model="tag.selected" value="tag" ng-true-value="tag"> {{tag.name}} 
</li>

将 newProduct 分配给范围时，无需将其作为 $scope.saveRecord() 中的参数传递。您还可以在帖子正文中传递整个对象。 ajax 调用是在没有简写 $http.post 的情况下编写的，无论哪种方式都可以，但我发现这更容易阅读。

$scope.saveRecord = function(){
    $http({
        url: "php/pinsert.php",
        method: "POST",
        data: $scope.newProduct
    }).success(function(data){
        // process returned data     
    });
}

在后端，数据的结构将与 $scope.newProduct 对象的结构相同。您将需要:

1. 循环访问此数据
2. 查找选定的标签
3. 将选中的 (selected.true) 标记值保存到表格中

我不知道您的 products 表的确切结构，但上述 3 个步骤是将复杂数据保存到数据库中的指南。

$connect = mysqli_connect("localhost", "root", "","user");
$data = json_decode(file_get_contents("php://input"));

foreach($data['tags'] as $tag){
    // Save only selected tags to products table
    if($tag->selected){
        $query = "
            INSERT INTO products(tag) 
            VALUES('$p_name','$p_catg','$tags','$status')
        ";
        $result = mysqli_query($connect, $query);
    }
}

希望这能让您开始，干杯!