Angularjs 1.5 & açısal malzeme: Başka bir açılır listeye bağlı olarak bir açılır listeyi doldurma

Question

Ülke listem ve durum listesini açısal denetleyicimden aldım. Sorun şu ki, ülke durumları içermiyorsa durum açılır listesini saklamak istiyorum. Ng-show kullanmayı denedim ama işe yaramadı. Açısal 1.5 kullanıyorum. Herhangi bir fikir?

İşte açısal denetleyicisidir:

MainApp.controller('CandidateController', ['$scope', '$window', '$http', '$location', '$routeParams', '$filter', '$mdDialog', function ($scope, $window, $http, $location, $routeParams, $filter, $mdDialog) { 
$scope.countrylist = [ 
      { "id": 1, "country": "USA" }, 
      { "id": 2, "country": "Canada" }, 
      { "id": 3, "country": "India" }, 
      { "id": 4, "country": "Australia" }, 
      { "id": 5, "country": "Afghanistan" }, 
      { "id": 6, "country": "Åland Islands" }, ]; 

    $scope.statelist = [ 

    { "Id": 4, "state": "New Brunswick", "countryId": 2 }, 
    { "Id": 5, "state": "Manitoba", "countryId": 2 }, 
    { "Id": 6, "state": "Delhi", "countryId": 3 }, 
    { "Id": 7, "state": "Bombay", "countryId": 3 }, 
    { "Id": 8, "state": "Calcutta", "countryId": 3 }, 


    ]; 

    $scope.getCountry = function() { 
     return countrylist; 
    }; 

    $scope.getCountryStates = function (countryId) { 
     $scope.states = ($filter('filter')($scope.statelist, { countryId: countryId })); 

    }; 
    showStates = false; 
    $scope.showStates = function (countrylist, countryId) { 
     if (countrylist.id == statelist.countryId) 
      showStates = true; 
    } 
}]); 

Burada açısal malzeme kullanıyorum ettiği zaman kısmi html görünüşüdür.

<md-input-container class="md-block" flex-gt-sm> 
         <label>Country</label> 
         <md-select name="countryDropdown" ng-model="candidateData.PermanentAddress.Country"> 
          <md-option ng-repeat="country in countrylist" value="{{country}}" ng-click="getCountryStates(country.id)"> 
           {{country.country}} 
          </md-option> 
         </md-select> 
         <div class="errors" ng-messages="CandidateDetails.countryDropdown.$error" ng-if="CandidateDetails.$dirty"> 
          <div ng-message="required">Required</div> 
         </div> 
        </md-input-container> 
        <div> 
         <md-input-container class="md-block" flex-gt-sm> 
          <label>State</label> 
          <md-select name="stateDropdown" ng-model="candidateData.PermanentAddress.State" ng-show="showStates"> 
           <md-option ng-repeat="state in states" value="{{state}}"> 
            {{state.state}} 
           </md-option> 
          </md-select> 
          <div class="errors" ng-messages="CandidateDetails.stateDropdown.$error" ng-if="CandidateDetails.$dirty"> 
           <div ng-message="required">Required</div> 
          </div> 
         </md-input-container> 
        </div> 

Answer 1

bu deneyin:

$scope.getCountryStates = function (countryId) { 
    $scope.states = ($filter('filter')($scope.statelist, { countryId: countryId })); 

    var stateList = $scope.statelist; 
    for(var i = 0; i < stateList.length; i++) 
    { 
     countryId != stateList[i].countryId ? $scope.showStates = false : $scope.showStates = true; 
    } 
}; 

Umut bu yardım.