Question

我想做一个具有依赖选择的下拉级联，例如http://jsfiddle.net/6eCZC/1/。

但我有一张表，其中的项目属于表格的一部分。

像这样：

$scope.option = [
{id: 1, name: "WebSite", 
  countries: [{id: 1, name: "Country", 
    servers: [{id: 1, name: "Server1"}, 
      {id: 2, name: "Server2"},
      {id: 3, name: "Server3"}]}]}];
  $scope.selectedRequest = {};
  $scope.selectedRequest.option = $scope.option[0];

和我的HTML

 <select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
<select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.option.countries">
 </select>
<select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.option.countries.servers">
  </select>

适用于网站和国家/地区，但不适用于服务器。

Answer 1

选择时使用以前选择的对象内容。

这是工作代码（带有一些新选项）：

＆＃13;

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.option = [{
    id: 1,
    name: "WebSite",
    countries: [{
      id: 1,
      name: "Switzerland",
      servers: [{
        id: 1,
        name: "Sw Server1"
      }, {
        id: 2,
        name: "Sw Server2"
      }, {
        id: 3,
        name: "Sw Server3"
      }]
    }, {
      id: 2,
      name: "Hungary",
      servers: [{
        id: 1,
        name: "Hu Server1"
      }, {
        id: 2,
        name: "Hu Server2"
      }]
    }]
  }];

  $scope.selectedRequest = {};
  $scope.selectedRequest.option = $scope.option[0];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
    <select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.site.countries"></select>
    <select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.country.servers"></select>
  </div>
</div>

＆＃13;

最佳，彼得

下拉级联互锁项目

1 个答案: