发布编辑表单数据并使用angularjs在控制器中获取它

时间:2018-08-06 11:10:44

标签: php angularjs codeigniter

我想使用angularjs将编辑表单数据发布到codeigniter控制器

这是我的angularjs控制器,我在那里收集和发布表单数据

  $scope.editlist = function(id){
                $http({
                    method:'post',       
  url:'http://localhost/Angular_demo/admin/index.php/welcome/get_edit_data/'+ 
                id
                }).then(function success(response){
                    $scope.sid = parseInt(response.data[0]['id']);
                    $scope.firstname = response.data[0]["first_name"];
                    $scope.lastname = response.data[0]['last_name'];
                    $scope.email = response.data[0]['email'];                        
                }); 
            }

            $scope.saveEdit = function(id,firstname,lastname,email){
                $http({
                    method:'post',
                    data:'id='+ id + '&first_name='+firstname+ 
                    '&last_name='+lastname+'&email='+email,

      url:'http://localhost/Angular_demo/admin/index.php/welcome/update_data'                         
                }).then(function success(response){
                    console.log(response.data);
                });

            }

我在哪里绑定和发布表单数据的视图

       <form name="editItem" class="form-horizontal">
      <input ng-model="sid" type="hidden" placeholder="Name" name="name" 
      class="form-control" />          
      <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">First 
          Name</label>
          <div class="col-sm-10"> 
              <input type="text" class="form-control" ng-model="firstname"  
          id="inputEmail3" placeholder="First name">
          </div> 
      </div>
      <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">Last 
          Name</label>
          <div class="col-sm-10"> 
              <input type="text" class="form-control" ng-model="lastname" 
          id="inputEmail3" placeholder="Last Name">
          </div> 
      </div>
      <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control- 
          label">Email</label>
          <div class="col-sm-10"> 
              <input type="text" class="form-control" ng-model="email" 
          id="inputEmail3" placeholder="Email">
          </div> 
      </div>        

      <div class="form-group"> 
          <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default" data- 
              dismiss="modal">Close</button>
                <button type="submit" ng-disabled="editdata.$invalid" 
       class="btn btn-primary create-crud" data-dismiss="modal" ng- 
       click="saveEdit(sid,firstname,lastname,email)">Submit</button>                  
          </div> 
      </div>
  </form>

这是我的Codeigniter控制器,我要在其中获取表单数据

  public function update_data(){
  $requests = json_decode(file_get_contents('php://input'), TRUE);
  $ids= array('id' =>$requests['id']);
  echo json_encode($ids);
  }

当我提交表单数据时,其控制器中的数据将显示为空,因此请帮助如何在控制器中获取表单数据。

2 个答案:

答案 0 :(得分:1)

 $scope.saveEdit = function(id,firstname,lastname,email){
            $http({
                method:'post',
                data:'id='+ id + '&first_name='+firstname+ 
                '&last_name='+lastname+'&email='+email,

  url:'http://localhost/Angular_demo/admin/index.php/welcome/update_data'                         
            }).then(function success(response){
                console.log(response.data);
            });

        }

应该是这样的:-

 $scope.saveEdit = function(id,firstname,lastname,email){
            $http({
                method:'post',
                data:{"id": id,"first_name":firstname, 
                "last_name":lastname,"email":email}

  url:'http://localhost/Angular_demo/admin/index.php/welcome/update_data'                         
            }).then(function success(response){
                console.log(response.data);
            });

        }

答案 1 :(得分:0)

由于codeigniter代码使用json_decode,因此$ http服务应使用JavaScript对象发布数据:

$scope.saveEdit = function(id,firstname,lastname,email) {
    var url = 'http://localhost/Angular_demo/admin/index.php/welcome/update_data';                         
    var data = {
      id: id,
      first_name: firstname,
      last_name: lastname,
      email: email,
    };
    $http.post(url, data
     ).then(function success(response){
        console.log(response.data);
    });
}

AngularJS框架会自动将JavaScript对象编码为JSON字符串。