Question

我有两个JSON的文件。

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

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

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

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

时区通过存储过程在数据库中与列出国家/地区的ID相关联。

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

我的控制器：

＆＃13;

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

＆＃13;

我的观点：

＆＃13;

<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>

＆＃13;

我需要什么：

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

Answer 1

更新：

我们将使用ng-change方法。在控制器中试试这个。我添加了自己的虚拟数据：

$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-change“过滤”控制器中的时区。）

<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>

在Angular.js中创建级联md-select / md-options下拉列表（动态JSON＆＃39; s）

1 个答案: