在Angular.js（Dynamic JSON's）中创建级联md-select/md-options下拉菜单

Question

我有两个JSON文件。

第一个文件是所有国家的列表。

{ 
"gid"=1, 
"name"="Afghanisthan", 
"parentId"=null 
} 
...and so on! 

第二个文件是所有时区的列表。

{ 
"gid"=1, 
"name"="UTC -12:00", 
"parentId=null 
} 

的时区是在数据库中的国家，通过存储过程与列表中的ID。

他们已经在视图中完美加载数据。

我的控制器：

(function() { 
 
    'use strict'; 
 

 
    angular.module('app.test_angular_node') 
 
    .controller('testCtrl', ['$scope', '$http', testCtrl]); 
 

 
    function testCtrl($scope, $http) { 
 

 
     //Combo de países 
 
     $scope.comboCountries = null; 
 

 
     $scope.comboTimezones = null; 
 

 
     $scope.countries = []; 
 

 
     $scope.timeZones = []; 
 

 

 
     $http({ 
 
     method: 'GET', 
 
     url: 'db/comboCountry' 
 
     }).success(function(data){ 
 

 
     $scope.countries = data; 
 

 

 
     }).error(function(error){ 
 
     console.log('Error en carga de datos de DB', error); 
 
     }); 
 

 
     $http({ 
 
     method: 'GET', 
 
     url: 'db/comboTime' 
 
     }).success(function(data){ 
 

 
     $scope.timeZones = data; 
 

 
     }).error(function(error){ 
 
     console.log('Error en carga de datos de DB', error); 
 
     }); 
 

 
    } 
 

 
})();

我的观点：

<div class="page" ng-controller="testCtrl"> 
 

 
    <div class="row ui-section"> 
 
     <div class="col-lg-8 clearfix"> 
 
      <h2 class="section-header">TEST</h2> 
 
     </div> 
 
     <div class="col-md-12"> 
 
      <md-select ng-name="comboCountries" ng-model="comboCountries"> 
 
       <md-option data-ng-repeat="country in countries" value="{{country.gid}}"> 
 
        {{country.name}} 
 
       </md-option> 
 
      </md-select> 
 
      <md-select ng-name="comboTimezones" ng-model="comboTimezones"> 
 
       <md-option data-ng-repeat="timeZone in timeZones"> 
 
        {{timeZone.name}} 
 
       </md-option> 
 
      </md-select> 
 
     </div> 
 
    </div> 
 
</div>

我需要什么：

我如何过滤数据，第二个下拉菜单仅加载与国家/地区country.gid相关的时区？

Answer 1

更新：

我们将只使用NG-变化的方法。在控制器中试试这个。我已经加入我自己的虚拟数据：

$scope.comboCountries = null; 
    $scope.comboTimezones = null; 
    $scope.countries = [ 
    { 
    "gid":1, 
    "name":"Afghanisthan", 
    "parentId":"1" 
    },{ 
    "gid":1, 
    "name":"Another Country", 
    "parentId":"2" 
    },{ 
    "gid":1, 
    "name":"The Last Country", 
    "parentId":"3" 
    }]; 
    $scope.timeZones = [ 
    { 
"gid":1, 
"name":"Afghanisthan - UTC -12:00", 
"parentId":"1" 
    }, 
    { 
"gid":1, 
"name":"Afghanisthan - UTC -12:00", 
"parentId":"1" 
    }, 
    { 
"gid":1, 
"name":"Another Country - UTC -12:00", 
"parentId":"2" 
    }, 
    { 
"gid":1, 
"name":"Another Country - UTC -12:00", 
"parentId":"2" 
    }, 
    { 
"gid":1, 
"name":"The Last Country - UTC -12:00", 
"parentId":"3" 
    }, 
    { 
"gid":1, 
"name":"The Last Country - UTC -12:00", 
"parentId":"3" 
    } 
    ]; 

    function checkTimeZone(timeZone) { 
     return timeZone.parentId == $scope.comboCountries; 
    } 

    $scope.getTimeZones = function(comboCountries){ 
    $scope.timeZones = $scope.timeZones.filter(checkTimeZone); 
    } 

现在让我们来视图（HTML）..

<div class="row ui-section"> 
     <div class="col-lg-8 clearfix"> 
      <h2 class="section-header"></h2> 
     </div> 
     <div class="col-md-12"> 
      <select ng-model="comboCountries" ng-change="getTimeZones(comboCountries)"> 
       <option ng-repeat="country in countries" value="{{country.parentId}}"> 
        {{country.name}} 
       </option> 
      </select> 
      <select ng-name="comboTimezones" ng-model="comboTimezones"> 
       <option ng-repeat="timeZone in timeZones"> 
        {{timeZone.name}} 
       </option> 
      </select> 
     </div> 
    </div> 

OLD ANSWER 如果要使用过滤器你可以试试这个，你也可以在控制器中完成它。 （即只是“过滤器”你的时区在控制器上使用您的comboCountries选择NG变化。）

<select 
    class="form-control" 
    ng-model="comboCountries" 
    ng-options="country in countries"> 
</select> 

<select 
    class="form-control" 
    ng-model="comboTimezones" 
    ng-options="timeZone in timeZones | filter:{parentId: comboCountries.parentId}"> 
</select>