使用Angular

时间:2015-07-02 11:10:39

标签: javascript php angularjs material-design

将此表单放在弹出框(Angular Material)中,在此表单中我有5个输入字段和2个选择列表。我可以使用数据库中的数据填充选择列表,我也可以保存数据,但只能从输入字段中保存,因此不能从选择框中保存。所以我想知道如何将选定的选项从选择列表保存到我的数据库。

我正在使用Angular和PHP作为后端db的情况如下:3个表

  1. tblTask​​
  2. tblLocation
  3. tblProjectType
  4. 来自tblLocation的id和tblProjectType引用返回tblTask​​(外键)

    我在php和app.js文件中添加项目类型的引用然后它将不再保存到db。在控制台中发生以下情况 - > http://gyazo.com/d9a7b1ef3f60b441fb37c807772a709c

    但是当我退出时,我能够保存5个输入字段中的所有数据。

    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>
    

    我的app.js文件

      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
    });
    

    我的PHP代码:

        <?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 个答案:

答案 0 :(得分:0)

对于那些可能与我有更多相同问题的人。我的问题的解决方案是我删除了外键,然后选择列表的值将保存到我的数据库