如何在4级获得级联下拉？

Here is my attempt: If the user hits Territory A i need to display "Sales Team A" and "Sales Team B" as my options.`enter code here: http://plnkr.co/edit/n2A83tHk4r0G1ZWddb7V?p=preview.

这是我的尝试:如果用户点击区域A,我需要显示“销售团队A”和“销售团队B”作为我的选项。输入代码:http://plnkr.co/edit/n2A83tHk4r0G1ZWddb7V?p = preview 。

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>

    <div data-ng-app="myApp"  class="container">
  <form class="form-horizontal" data-ng-controller="dropdownCtrl">

     <div class="form-group">
      <label for="country" class="col-sm-2 control-label">* </label>
      <div class="col-sm-7">             
        <select data-ng-model="customer.Country"
                data-ng-options="obj.id as obj.country for obj in countries"
                data-ng-change="getCountryStates()"
                class="form-control"
                data-ng-required="true"
                id="country">
          <option value="">-- Choose Org --</option>
        </select>      
      </div>
    </div>

    <div class="form-group">
      <label for="state" class="col-sm-2 control-label">** </label>
      <div class="col-sm-7">       
        <select data-ng-model="customer.State"
                data-ng-options="x.Id as x.state for x in sates"
                data-ng-change = "getStateCities()"
                class="form-control"
                data-ng-required="true"
                id="state">
          <option value="">-- Select --</option>
        </select>      
      </div>
    </div>

     <div class="form-group">
      <label for="city" class="col-sm-2 control-label">*** </label>
      <div class="col-sm-7">       
        <select  data-ng-model="customer.City"
                 data-ng-options="x.Id as x.city for x in cities"
                 data-ng-change = "getStatesSales()"
                class="form-control"
                 data-ng-required="true"
                id="city">
          <option value="">-- Select --</option>
        </select>      
      </div>
     </div>

      <div class="form-group">
          <label for="sales" class="col-sm-2 control-label">**** </label>
          <div class="col-sm-7">
              <select  data-ng-model="customer.Sales"
                       data-ng-options="x.Id as x.sales for x in mysales"
                       class="form-control"
                       data-ng-required="true"
                       id="sales">
                  <option value="">-- Select --</option>
              </select>
          </div>
      </div>


  </form>
</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
    <script src="js/index.js"></script>
  </body>
</html>

Here is my index.js file:

这是我的index.js文件:

var myApp = angular.module('myApp',[]);
myApp.controller('dropdownCtrl', ['$scope','CustomerService', function($scope, CustomerService) {

  $scope.countries = CustomerService.getCountry();

  $scope.getCountryStates = function(){
    $scope.sates = CustomerService.getCountryState($scope.customer.Country);
    $scope.cities =[];
    $scope.mysales = [];
  }

  $scope.getStateCities = function(){
//    debugger;
     $scope.cities = CustomerService.getStateCity($scope.customer.State);
     console.log("Hi");
//     console.log($scope.cities);
  }

  $scope.getStatesSales = function(){
//      debugger;
       $scope.sales = CustomerService.getSalesList($scope.customer.Sales);
//     console.log($scope.sales);

    }


}]);

myApp.factory("CustomerService", ['$filter', function($filter){
 var service = {};


  var countrylist = [
            { "id": 1, "country": "Marketing" },
            { "id": 2, "country": "Sales" },
            { "id": 3, "country": "Customer Service" }
    ];

  var statelist = [
    {"Id":1, "state":"Marketing Team A", "countryId": 1},
    {"Id":3, "state":"Marketing Team B", "countryId": 1},
    {"Id":4, "state":"Territories", "countryId": 2}
  ];

  var citylist = [
    {"Id":5, "city":"Territory A", "stateId": 4},
    {"Id":6, "city":"Territory B", "stateId": 4}
];
   var salesTeamList = [
   {"Id":1, "sales":"Sales Team A", "salesId": 5},
   {"Id":2, "sales":"Sales Team B", "salesId": 5},
   {"Id":3, "sales":"Sales Team A", "salesId": 6},
   {"Id":4, "sales":"Sales Team B", "salesId": 6}

   ];


  service.getCountry = function(){    
    return countrylist;
  };

  service.getCountryState = function(countryId){
    var states = ($filter('filter')(statelist, {countryId: countryId}));
    return states;
  };
  service.getStateCity = function(stateId){    

    var items = ($filter('filter')(citylist, {stateId: stateId}));      
    return items;

  };

  service.getSalesList = function(salesId){

      var items = ($filter('filter')(salesTeamList, {salesId: salesId}));
      return items;
      console.log(items);
   };

  return service;


}]);

1 个解决方案

#1

You missed two points:

你错过了两点:

I changed here the parameter to $scope.customer.City

我在这里将参数更改为$ scope.customer.City

$scope.getStatesSales = function(){
   $scope.sales = CustomerService.getSalesList($scope.customer.City);
}

and in your last drop down you passed the wrong list mySales so I changed it to sales in ng-repeat

在你的最后一次下拉菜单中你传递了错误的列表mySales,所以我把它改成了ng-repeat的销售额

data-ng-options="x.Id as x.sales for x in sales"

See the plunker

看到plunker

#1