dqh1992
dqh1992
2015-07-02 11:10

使用Angular时,选择列表的选定值不会保存到db

已采纳

have this form in a pop box (Angular Material) and in this form i have 5 input fields and 2 select list. i am able to populate the select list with data from the db and i am also able to save the data but only from the input fields so not from the select box. So i would like to know how to save the selected option from a select list to my db.

I am working with Angular and PHP for the back-end The db situation is the following: 3 tables

  1. tblTask
  2. tblLocation
  3. tblProjectType

Both id from tblLocation and tblProjectType reference back to tblTask (Foreign Key)

The minute i add the reference of the project type in my php and app.js file then it won't save any more to the db. In the console the following happens -> http://gyazo.com/d9a7b1ef3f60b441fb37c807772a709c

But when i leave it out i am able to save all data from the 5 input fields.

HTML code:

  <md-dialog aria-label="">
  <form ng-controller="AppCtrl">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-input-container md-no-float="">
          <input class="customInput" placeholder="Name this task..." name="task_name" ng-model="task_name">
        </md-input-container>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="closeDialog()">
          <md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <div>
          <div layout="row">
              <div class="labelPosition">
                <md-select-label>Project type</md-select-label>
              </div>
              <div id="containerSelectListProjectType">
                <md-select ng-model="task_project_type" name="project_type" placeholder="Choose a project type" id="containerProjectType">
                <md-option ng-repeat="projecttype in projectTypeInfo" ng-value="{{projecttype.id_ProjectType}}">{{projecttype.project_type}}</md-option>
              </md-select>
              </div>

          </div>

          <br/>

          <div layout="row">
            <div class="labelPosition">
              <md-select-label>Location</md-select-label>
            </div>
            <div id="containerSelectListLocation">
               <md-select ng-model="task_location" name="location" placeholder="Choose your location">
                <md-option ng-repeat="location in locationInfo" ng-value="{{location.id_Location}}">{{location.location}}</md-option>
              </md-select>
            </div>
          </div>  

          <br/>

          <div layout="row">
            <div class="labelPosition">
              <md-select-label>Estimate time</md-select-label>
            </div>
            <div id="containerEstimateTime">
                <md-chips ng-model="ctrl.numberChips2">
                   <input type="number" ng-model="task_estimate_time" ng-model="ctrl.numberBuffer" placeholder="Enter a number" name="task_estimate_time">
                </md-chips>
            </div>    
          </div>  

          <br/>

          <div layout="row">
            <div class="labelPositionCP">
              <md-select-label>Client/Project</md-select-label>
            </div>  
            <div id="containerClientProject">
                <md-input-container md-no-float="">
                    <input name="project_client_name" placeholder="Project/Client name" ng-model="task_project_client_name">
                </md-input-container>
            </div>
          </div> 

          <br />

          <div layout="row">
            <div class="labelPosition">
              <md-select-label>Url</md-select-label>
            </div>  
            <div id="containerUrl">
                <md-input-container md-no-float="">
                    <input name="url" placeholder="Url" ng-model="task_url">
                </md-input-container>
            </div>
          </div> 

          <br />

          <div layout="row">
            <div class="labelPosition">
              <md-select-label>Resource link</md-select-label>
            </div>  
            <div id="containerResourceLink">
                <md-input-container md-no-float="">
                    <input name="resource_link" placeholder="Resource link" ng-model="task_resource_link">
                </md-input-container>
            </div>
          </div> 

          <br />

          <div layout="row">
            <div class="labelPosition">
              <md-select-label>Note's</md-select-label>
            </div>  
            <div id="containerNotes">
                <md-input-container md-no-float="">
                  <textarea ng-model="task_notes" ng-model="task_notes" placeholder="Note's" columns="1" md-maxlength="150"></textarea>
                </md-input-container>
            </div>
          </div>`enter code here`
      </div>
    </md-dialog-content>
    <div class="md-actions" layout="row">
      <md-button class="md-primary">Delete</md-button>

      <md-button class="md-primary">Url</md-button>

      <md-button  class="md-primary">Resource link</md-button>

      <md-button  class="md-primary">Note's</md-button>

      <md-button class="md-primary">Cancel</md-button>

      <md-button ng-click="save_task()" class="md-primary">Save</md-button>
    </div>
  </form>
</md-dialog>

My app.js file

  app.controller('AppCtrl', function($scope, $mdDialog, $http) {

        $scope.taskInfo = [];

        $scope.save_task = function(){
            $http.post('db.php?action=add_task', 
                {
                    'task_name'                  : $scope.task_name, 
                    'id_ProjectType'             : $scope.task_project_type, 
                    'task_project_client_name'   : $scope.task_project_client_name,
                    'task_url'                   : $scope.task_url,
                    'task_resource_link'         : $scope.task_resource_link,
                    'task_notes'                 : $scope.task_notes
                }
            )

            .success(function (data, status, headers, config) {
                //$scope.userInfo.push(data);
                //$scope.get_task(); //this will fetch latest record from DB
                console.log("The task has been added successfully to the DB");
                console.log(data);
            })

            .error(function(data, status, headers, config) {
                console.log("Failed to add the task to DB");
            });


        }
        //Populating select list with data from DB for project type
        $scope.getProjectTypeFunction = function() {
            $http.get('db.php?action=get_ProjectType_Info').success(function(data)
            { 
                $scope.projectTypeInfo = data;   
                console.log("Retrieved data from server"); 
                //console.log(data);
            })
            .error(function(data, status, headers, config)
            {
                console.log("Error in retrieving data from server");
            });
        }

       $scope.getProjectTypeFunction(); //-- call the function that calls $http

       //Populating select list with data from DB for location
        $scope.getLocationFunction = function() {
            $http.get('db.php?action=get_Location_Info').success(function(data)
            { 
                $scope.locationInfo = data;   
                console.log("Retrieved data from server"); 
                //console.log(data);
            })
            .error(function(data, status, headers, config)
            {
                console.log("Error in retrieving data from server");
            });
        }

       $scope.getLocationFunction(); //-- call the function that calls $http
});

My php code:

    <?php 
    include('config.php');

    switch($_GET['action'])  {
        case 'get_ProjectType_Info' :
            get_ProjectType_Info(); 
            break;
        case 'add_task' :
            add_task(); 
            break;
        case 'get_Location_Info' :
            get_Location_Info(); 
            break;
    }

    /**  Function to data from tblProjectType **/
    function get_ProjectType_Info(){
        $qry = mysql_query('SELECT * from tblProjectType');

        $data = array();
        while($rows = mysql_fetch_array($qry))
        {
            $data[] = array(
                        "id_ProjectType"    => $rows['id_ProjectType'],
                        "project_type"      => $rows['project_type']
                        );
        }

        print_r(json_encode($data));
        //return json_encode($data);
    }

    /**  Function to data from tblLocation **/
    function get_Location_Info(){
        $qry = mysql_query('SELECT * from tblLocation');

        $data = array();
        while($rows = mysql_fetch_array($qry))
        {
            $data[] = array(
                        "id_Location"   => $rows['id_Location'],
                        "location"      => $rows['location']
                        );
        }

        print_r(json_encode($data));
        //return json_encode($data);
    }

    /**  Function to add a task to db **/
    function add_task() {
        $data = json_decode(file_get_contents("php://input")); 
        $task_name                    = $data->task_name; 
        $task_project_type            = $data->id_ProjectType;  
        /**$task_location                = $data->id_Location;  
        $task_estimate_time           = $data->task_estimate_time;**/
        $task_project_client_name     = $data->task_project_client_name;
        $task_url                     = $data->task_url;
        $task_resource_link           = $data->task_resource_link;
        $task_notes                   = $data->task_notes;

        print_r($data);

        $qry = 'INSERT INTO tblTask(task_name, id_ProjectType, task_project_client_name, task_url, task_resource_link, task_notes) 
                VALUES ("' . $task_name   . '","' . $task_project_type . '","' . $task_project_client_name . '","' . $task_url . '","' . $task_resource_link . '","' . $task_notes .'")';

        echo ($qry);

        $qry_res = mysql_query($qry);
        if ($qry_res) {
            $arr = array('msg' => "Task added successfully!!!", 'error' => '');
            $jsn = json_encode($arr);
            // print_r($jsn);
        } 
        else {
            $arr = array('msg' => "", 'error' => 'Error in inserting record');
            $jsn = json_encode($arr);
            // print_r($jsn);
        }
    }


?>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doulai6469 doulai6469 6年前

    For those who might have the same issue as me in the further. The solution to my problems was that I deleted the foreign keys and then the values of the select list would save to my db

    点赞 评论 复制链接分享

相关推荐