Angularjs 1.5＆angular material：別のドロップダウンリストに基づいてドロップダウンリストを設定する

Question

私の国リストと状態リストは、私の角度コントローラにあります。私の問題は、国に州が含まれていない場合、州のドロップダウンリストを隠したいということです。 ng-showを使ってみましたが動作しませんでした。私は角度1.5を使用しています。何か案が？

は、ここに私の角度コントローラです：

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

ここで私は角材料を使用していた中で、私の部分HTMLビューで、あります。

<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

これを試してみてください：

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

は、このヘルプを願っています。