使用角度js和php填充选择列表的问题

时间:2015-07-01 18:23:19

标签: php mysql angularjs angular-material

我正在尝试用我的db(php& mysql)中的数据填充选择列表。我正在使用AngularJs和Angular Material。因此,我无法显示列表中数据库的数据

db情况:

  • tblProjectType - >表的名称
  • 2行:
    • id_ProjectType
    • project_type

任何帮助或指示都会很棒。

这是我的HTML代码:

<form ng-controller="AppCtrl">
      <div layout="row">
        <md-select-label>Project type</md-select-label>

        <md-select ng-model="project_type" name="project_type" placeholder="Choose a project type" id="containerProjectType">
          <md-option ng-repeat="projecttype in projecttypes" value="{{projecttype.id_ProjectType}}">{{projecttype.project_type}}</md-option>
        </md-select>

      </div>
</form>

我app.js的代码是:

    var app = angular.module("DragDrop", ['ngMaterial']);
    app.controller('AppCtrl', function($scope, $mdDialog, $http) {

    $scope.projectTypeInfo = [];

    var getProjectTypeFunction = function(succesFn, errorFn)
    {
        $http.get('db.php?action=get_ProjectType_info')// call to the server
        .succesFn(function(data){
            succesFn(data); //call the function passed into getProjectTypeFunction with the data from the server
            console.log('Retrieved data from server');
        })
        .error(errorFn || function() {
            console.log("Error in retrieving data from server");
        })

    }

    this.reloadProjectTypeList = function() 
    {
         getProjectTypeFunction(       
          /* success function */ 
          function(data) { 
              //debugger; 
              $scope.projectTypeInfo = data; 
              //digest recycle
              //if (!$scope.$$phase) { $scope.$apply(); }
          }, 
          /* error function */ 
          function() 
          { 
              alert("Server load failed"); 
          }) 
    };

我的PHP代码是:

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

//echo ('test' . $_GET['action']);
switch($_GET['action'])  {
    case 'get_ProjectType_info' :
        get_ProjectType_info(); 
        break;

}

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

    echo("test");
    //echo(qry);

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

?>

1 个答案:

答案 0 :(得分:1)

所以对于初学者来说,清理你的JS。我们可以减少您的需求:

var app = angular.module("DragDrop", ['ngMaterial']);

app.controller('AppCtrl', function($scope, $mdDialog, $http)
{
  $scope.projectTypeInfo = [];

  $scope.getProjectTypeFunction = function()
  {
    $http.get('db.php?action=get_ProjectType_info')
      .success(function(data, status, headers, config)
      {
        $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");
        console.log(data,status);
      });
  };

  $scope.getProjectTypeFunction(); //-- call the function that invokes $http.get()
};

在PHP中,您的函数需要通过echo json_encode($data);回显数据,而不是返回它(如@Avalanche所述)。

现在,您的控制台应输出一些内容,但您需要从PHP中删除console.log("test");,因为这肯定会导致错误。

修改

目前您的重复状态:

<md-option ng-repeat="projecttype in projecttypes" value="{{projecttype.id_ProjectType}}">{{projecttype.project_type}}</md-option>

我们已将您的数据存储在$scope.projectTypeInfo中,因此需要将其修改为:

<md-option ng-repeat="projecttype in projectTypeInfo" ng-value="projecttype.id_ProjectType">{{projecttype.project_type}}</md-option>