Ulises Vargas De Sousa Ulises Vargas De Sousa - 2 months ago 20
AngularJS Question

Create a cascading md-select / md-options dropdown in Angular.js (Dynamic JSON's)

I've two JSON's files.

The first file is a list of all Countries.

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


The second file is a list of all Timezones.

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


The timezones are related in database to id of list the countries, through an Store Procedure.

They've load data perfectly in the view.

MY CONTROLLER



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

}

})();





MY VIEW



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





THAT I NEED!

How I could filtering the data, that the second dropdown loads only the Timezones related to
country.gid
of countries?

Answer

UPDATED:

We are going to just use the ng-change method. Try this in the controller. I have added my own dummy data:

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

Now let's get to the view (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 You can try this if you want to use a filter, you could also just do it in the controller. (i.e. just "filter" your timeZones in the controller using an ng-change on your comboCountries select.)

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