如何在angularjs中动态创建依赖下拉列表？

Question

我正在做一个项目，我使用下面的链接来填充某些下拉列表。 我想要动态相关下拉列表，以便我可以将其用作过滤器。 我在 Angular 中看到了一些依赖下拉列表的链接，但它显示了一些静态 json 数据。我无法动态创建相同的 json 数据。

{
            'India': {
                'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
            },
            'USA': {
                'Alabama': ['Montgomery', 'Birmingham'],
                'California': ['Sacramento', 'Fremont'],
                'Illinois': ['Springfield', 'Chicago']
            },
            'Australia': {
                'New South Wales': ['Sydney'],
                'Victoria': ['Melbourne']
            }
        };

我想要这种数据。

以下是我的链接和我从该链接获得的 json 数据。

 {$scope.names4 = $scope.names4 = response.data.service;});
  $http.get("xyzsomefile.php")
  .then(function(response) 
  {$scope.names5 = $scope.names5 = response.data.service;});

xyzsomefile.php:

$candidates = mysql_query("
SELECT i.interview_id
     , i.com_name
     , i.loc_name
     , i.interview_candidate
     , r.candidate_email
     , c.com_name
     , l.loc_name
     , d.dep_name 
  FROM job_interview i
  JOIN final_candidate f
    ON f.interview_id = i.interview_id 
  JOIN resume_records r
    ON r.candidate_name = i.interview_candidate 
  JOIN company_tbl c
    ON c.com_id = f.com_name 
  JOIN location_tbl l
    ON l.loc_id = f.loc_name 
  JOIN department_tbl d
    ON d.dep_id = f.dep_name 
 WHERE i.org_id = $_SESSION[org_id] 
 ORDER 
    BY i.interview_id
  ");

    $company = array();
    while ($row = mysql_fetch_array($candidates,MYSQL_NUM))
        {
            $company['service'][] = array(
                'candidate_id' => $row[0],        
                'candidate_name' => $row[3],
                'candidate_email' => $row[4],
                'candidate_com' => $row[5],
                'candidate_loc' => $row[6],
                'candidate_dep' => $row[7]          
            );

        }
        echo json_encode($company,JSON_PRETTY_PRINT,JSON_FORCE_OBJECT);

来自上述链接的json数据：

 {
  "service": [
    {
      "candidate_id": "1",
      "candidate_name": "Name1",
      "candidate_email": "amitsutar119@gmail.com",
      "candidate_com": "Company1",
      "candidate_loc": "com1_loc1",
      "candidate_dep": "com1_loc1_dep1"
    },
    {
      "candidate_id": "3",
      "candidate_name": "Name 3_title_1",
      "candidate_email": "name3@gmail.com",
      "candidate_com": "Company1",
      "candidate_loc": "com1_loc1",
      "candidate_dep": "com1_loc1_dep1"
    },
    {
      "candidate_id": "5",
      "candidate_name": "Smith",
      "candidate_email": "smith@gmail.com",
      "candidate_com": "Company2",
      "candidate_loc": "com2_loc2",
      "candidate_dep": "com2_loc2_dep1"
    },
    {
      "candidate_id": "5",
      "candidate_name": "Smith",
      "candidate_email": "smith@gmail.com",
      "candidate_com": "Company2",
      "candidate_loc": "com2_loc2",
      "candidate_dep": "com2_loc2_dep1"
    }
  ]
}

你可以看到第一个 json。如果我选择“印度”，则在第一个下拉列表中，然后在第二个下拉列表中显示“maha”、“madhya”和“raj”。如果我在第二个下拉列表中选择“maha”，那么在第三个下拉列表中只有来自马哈拉施特拉邦的位置必须显示..

现在在我的情况下，您可以看到第二个 json 数据...如果我选择第一个下拉菜单，则应该出现“candidate_name”。在第二个下拉列表中，应显示他的 Candidate_com。在第三个下拉列表中，应显示他的 Candidate_loc。

Answer 1

给你：

这不是最好的实现（现在没有太多时间），但是您可以执行给定示例中的类似操作：

P.S：我看到你也在编写服务器端代码，你可以想出一些好的结构来保存服务器端的数据。

angular.module('myApp', [])
  .controller('MyController', MyController)

function MyController($scope) {
  $scope.candidateSel = undefined;
  $scope.selecetedCompany = undefined;
  $scope.selecetdLoc = undefined;

  $scope.listData = [{
    "candidate_id": "1",
    "candidate_name": "Name1",
    "candidate_email": "amitsutar119@gmail.com",
    "candidate_com": "Company1",
    "candidate_loc": "com1_loc1",
    "candidate_dep": "com1_loc1_dep1"
  }, {
    "candidate_id": "3",
    "candidate_name": "Name 3_title_1",
    "candidate_email": "name3@gmail.com",
    "candidate_com": "Company1",
    "candidate_loc": "com1_loc1",
    "candidate_dep": "com1_loc1_dep1"
  }, {
    "candidate_id": "5",
    "candidate_name": "Smith",
    "candidate_email": "smith@gmail.com",
    "candidate_com": "Company2",
    "candidate_loc": "com2_loc2",
    "candidate_dep": "com2_loc2_dep1"
  }, {
    "candidate_id": "6",
    "candidate_name": "Smith",
    "candidate_email": "smith@gmail.com",
    "candidate_com": "Company2",
    "candidate_loc": "com2_loc2",
    "candidate_dep": "com2_loc2_dep1"
  }];

  $scope.getInfo = function() {
    if ($scope.candidateSel) {
      $scope.company = [$scope.candidateSel['candidate_com']];
      $scope.location = [$scope.candidateSel['candidate_loc']];
    }
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">

  <div>
    Names:
    <select id="names" ng-model="candidateSel" ng-options="data.candidate_name for data in listData track by data.candidate_id" ng-change="getInfo()">
      <option value=''>Select</option>
    </select>
  </div>

  <div>
    Company:
    <select id="company" ng-disabled="!candidateSel" ng-model="selecetedCompany" ng-options="cancompany for cancompany in company">
      <option value="">Select</option>
    </select>
  </div>

  <div>
    Location:
    <select id="location" ng-disabled="!selecetedCompany" ng-model="selecetdLoc" ng-options="canloc for canloc in location">
      <option value="">Select</option>
    </select>
  </div>

  <div>
    Selected candidate: {{ candidateSel['candidate_name'] }}
  </div>
  <div>
    Selected candidate's company: {{ selecetedCompany }}
  </div>
  <div>
    Selected candidate's location: {{ selecetdLoc }}
  </div>

</div>