使用php和angularjs

时间:2017-05-24 06:23:17

标签: javascript php mysql angularjs checkbox

我有一个带有复选框,文本框和单选按钮的html表单。单击保存按钮时,表单数据将插入到数据库中。我使用angularjs控制器来获取表单数据和PHP插入到mysql中。

问题:如何在控制器和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';  
  }  

 ?>

1 个答案:

答案 0 :(得分:1)

我会同样重构你的标签数组。如果选中该复选框,则selected属性将设置为true。该名称仅供展示。

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

复选框的标记也应重新构建。请注意,ng-model使用.selected的{​​{1}}属性。这将设置允许您查看保存到DB时选择的标签属性。

$scope.newProduct.tags

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

$http.post

在后端,数据的结构与$scope.saveRecord = function(){ $http({ url: "php/pinsert.php", method: "POST", data: $scope.newProduct }).success(function(data){ // process returned data }); } 对象的结构相同。你需要:

  1. 循环浏览此数据
  2. 查找所选标签
  3. 将选中的(selected.true)标记值保存到表格
  4. 我不知道$scope.newProduct表的确切结构,但上面的3个步骤是将复杂数据保存到数据库中的指南。

    products

    希望这能让你开始,欢呼!