Angularjs &Angular Material : 国家依赖下拉列表

Question

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

这是我的部分视图代码：

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

这是我的角度控制器： 角度

  .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

Answer 2

HTML：使用 ng-change

 <md-select name="countryDropdown1" ng-model="candidateData.PermanentAddress.Country" ng-required="true">
                            <md-option ng-repeat="country in countrylist" value="{{country.country}}" ng-change="getCountryStates(country.id)" >
                                {{country.country}}
                            </md-option>
                        </md-select>

JS：

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

                   if ($scope.states.length >0)
                     $scope.stateInput = true; 
                  else 
                    $scope.showStates(countryId);

                };

Answer 3

试试这个。

查看文件：

您只需要使用 3 个单独的状态来显示适当的结果。

<md-input-container class="md-block" ng-show="status.countrySelected && status.stateInput">
//input
</md-input-container>

<md-input-container class="md-block" flex-gt-sm ng-show="status.countrySelected && status.stateSelect">
//input
</md-input-container>

JS 文件

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

  if($scope.states.length == 0){
       $scope.status.stateSelect = false;
       $scope.status.stateInput = true;
  }else{
       $scope.status.stateInput = false;
       $scope.status.stateSelect = true;
  }
};

$scope.status = {
  countrySelected: false,
  stateInput: false,
  stateSelect: false
};

这是完整的工作代码。 http://codepen.io/next1/pen/aNKEq