Angularjs & Angular Material : Country dependency dropdown list

Question

我想在国家包含州时显示一个下拉列表，如果国家不包含州则显示输入字段。我在这里添加了一些代码，但我不知道为什么它们似乎不起作用。当我单击包含州的国家/地区时，下拉列表将首次工作，州输入字段也是如此(在我刷新之后，而不是在我单击包含州的国家/地区之后)。包含州的国家是印度和加拿大。

这是我的部分 View 代码:

<div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">

   <md-input-container class="md-block" flex-gt-sm >
                        <label>Country</label>
                        <md-select name="countryDropdown1" ng-model="candidateData.PermanentAddress.Country" ng-required="true">
                            <md-option ng-repeat="country in countrylist" value="{{country.country}}" ng-click="getCountryStates(country.id)" >
                                {{country.country}}
                            </md-option>
                        </md-select>

                    </md-input-container>

                    <md-input-container class="md-block" ng-show="stateInput">
                        <label>State</label>
                        <input required name="stateInput" ng-model="candidateData.PermanentAddress.State" ng-required="true"/>

                    </md-input-container>

                        <md-input-container class="md-block" flex-gt-sm ng-show="States" >
                            <label>State</label>
                            <md-select name="stateDropdown1" ng-model="candidateData.PermanentAddress.State"ng-required="true" >
                                <md-option ng-repeat="state in states" value="{{state.state}}">
                                    {{state.state}}
                                </md-option>
                            </md-select>

                        </md-input-container>
</div>

这是我的 Angular Controller :棱 Angular

  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('DemoCtrl', function($scope, $filter) {


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

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

        $scope.States = false;
        $scope.stateInput = false;
        //$scope.showStates = function (countryId) {

        //    for (var i = 0; i < $scope.statelist.length; i++) {
        //        if ($scope.statelist[i].countryId == countryId) {
        //            $scope.States = true;
        //            return false;
        //        }

        //    }
        //    $scope.States = false;
        //    $scope.stateInput = true;
        //    return false;
        //}
        $scope.showStates = function (countryId) {

            for (var i = 0; i < $scope.statelist.length; i++) {
                if ($scope.statelist[i].countryId == countryId) {
                    $scope.States = true;
                    return false;
                }
                //else {
                //    $scope.States = false;
                //    $scope.stateInput = true;
                //    return false;
                //}    
            }

            $scope.States = false;
            $scope.stateInput = true;
            return false;
        }


$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 },
{ "Id": 9, "state": "Johor", "countryId": 145 },
{ "Id": 10, "state": "Kedah", "countryId": 145 },
{ "Id": 11, "state": "Kelantan", "countryId": 145 },
{ "Id": 12, "state": "Labuan", "countryId": 145 },
{ "Id": 13, "state": "Melaka", "countryId": 145 },
{ "Id": 14, "state": "Negeri Sembilan", "countryId": 145 },
{ "Id": 15, "state": "Pahang", "countryId": 145 },
{ "Id": 16, "state": "Perak", "countryId": 145 },
{ "Id": 17, "state": "Perlis", "countryId": 145 },
{ "Id": 18, "state": "Pulau Pinang", "countryId": 145 },
{ "Id": 19, "state": "Sabah", "countryId": 145 },
{ "Id": 20, "state": "Sarawak", "countryId": 145 },
{ "Id": 21, "state": "Selangor", "countryId": 145 },
{ "Id": 22, "state": "Terengganu", "countryId": 145 },
{ "Id": 23, "state": "Wilayah Persekutuan", "countryId": 145 }]


$scope.countrylist = [
       { "id": 1, "country": "USA" },
       { "id": 2, "country": "Canada" },
       { "id": 3, "country": "India" },
       { "id": 4, "country": "Malaysia" },];

  });

这是我的代码链接:

http://codepen.io/zcook/pen/yOEPMa

Answer 1

我只是通过这样做更改了您的代码:

$scope.getCountryStates = function(countryId) {
  $scope.states = ($filter('filter')($scope.statelist, function(s) {
    return s.countryId === countryId;
  }));
  $scope.candidateData.PermanentAddress.State = null;
  $scope.hasStates = $scope.states && $scope.states.length > 0;
};

然后我更改了 html 来处理 hasStates 标志:

 <md-input-container class="md-block" flex-gt-sm ng-show="hasStates" >

和:

<md-input-container class="md-block" ng-show="!hasStates">

可能您的过滤器正在获取 countryId 中包含 1、2、3 或 4 的所有州(即 countryId 145 代表美国国家/地区 ID 为 4)

您的更新代码:http://codepen.io/diegopolido/pen/MyXOEp?editors=1010