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

希望这有帮助。

Angularjs 1.5＆amp;角度材质：根据另一个下拉列表填充下拉列表

1 个答案: