Javascript 如何使用angular js创建搜索类型下拉列表？

我有一份国家和州的名单。这段代码使用的是级联下拉列表。如何根据用户输入创建下拉列表

期望： 当我单击“国家”下拉列表时，如果用户输入基于输入的国家列表，则应该出现一个带有列表的文本框（如搜索）

我在下面添加了我的代码

angular.module('test', [])
    .controller('TestController', ['$scope', '$filter',

function ($scope, $filter) {
    $scope.country = "India";
    $scope.state = "Rajasthan";
    $scope.city = "Ajmer";

    $scope.countries = [{
        "name": "India",
            "states": [{
            "name": "Maharashtra",
                "cities": [{
                "name": "Pune"
            }, {
                "name": "Mumbai"
            }, {
                "name": "Nagpur"
            }, {
                "name": "Akola"
            }]
        }, {
            "name": "Madhya Pradesh",
                "cities": [{
                "name": "Indore"
            }, {
                "name": "Bhopal"
            }, {
                "name": "Jabalpur"
            }]
        }, {
            "name": "Rajasthan",
                "cities": [{
                "name": "Jaipur"
            }, {
                "name": "Ajmer"
            }, {
                "name": "Jodhpur"
            }]
        }]
    }, {
        "name": "USA",
            "states": [{
            "name": "Alabama",
                "cities": [{
                "name": "Montgomery"
            }, {
                "name": "Birmingham"
            }]
        }, {
            "name": "California",
                "cities": [{
                "name": "Sacramento"
            }, {
                "name": "Fremont"
            }]
        }, {
            "name": "Illinois",
                "cities": [{
                "name": "Springfield"
            }, {
                "name": "Chicago"
            }]
        }]
    }, {
        "name": "Australia",
            "states": [{
            "name": "NewSouthWales",
                "cities": [{
                "name": "Sydney"
            }]
        }, {
            "name": "Victoria",
                "cities": [{
                "name": "Melbourne"
            }]
        }]
    }];

    $scope.getStates = function () {
        $scope.states = null;
        $scope.cities = null;
        console.log($scope.country);
        if ($scope.country != null) {
            var filteredCountry = $filter("filter")($scope.countries, $scope.country);
            if (filteredCountry != null && filteredCountry.length == 1) {
                $scope.states = filteredCountry[0].states;
            }
        }
    };

    $scope.getCity = function () {
        $scope.cities = null;
        if ($scope.state != null) {
            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null && filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    };

    if ($scope.country != null) {
        var filteredCountry = $filter("filter")($scope.countries, $scope.country);
        if (filteredCountry != null && filteredCountry.length == 1) {
            $scope.states = filteredCountry[0].states;

            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null && filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    }

    $scope.alertCity = function () {
        alert('You selected ' + $scope.city);
    };
    //console.log($scope.countries);
}]);

html

国家：
挑选
国家：
挑选
城市：
挑选

---

我想为每个下拉列表引入一个过滤器。

您实际上可以使用。因为您已经使用AngularJS填充了数据，所以完成了。因此，请查看以下代码段：

角度模块（'test'，[]） .controller（'TestController'，['$scope'，'$filter'，'， 函数（$scope$filter）{ $scope.country=“印度”； $scope.state=“拉贾斯坦邦”； $scope.city=“Ajmer”； $scope.countries=[{ “名称”：“印度”， “国家”：[{ “名称”：“马哈拉施特拉邦”， “城市”：[{ “名称”：“浦那” }, { “名称”：“孟买” }, { “名称”：“那格浦尔” }, { “名称”：“阿科拉” }] }, { “名称”：“中央邦”， “城市”：[{ “名称”：“印多尔” }, { “名称”：“博帕尔” }, { “姓名”：“贾巴尔普” }] }, { “名称”：“拉贾斯坦邦”， “城市”：[{ “名称”：“斋浦尔” }, { “名称”：“Ajmer” }, { “名称”：“焦特布尔” }] }] }, { “名称”：“美国”， “国家”：[{ “姓名”：“阿拉巴马州”， “城市”：[{ “姓名”：“蒙哥马利” }, { “姓名”：“伯明翰” }] }, { “名称”：“加利福尼亚”， “城市”：[{ “姓名”：“萨克拉门托” }, { “名称”：“弗里蒙特” }] }, { “名称”：“伊利诺伊州”， “城市”：[{ “名称”：“斯普林菲尔德” }, { “姓名”：“芝加哥” }] }] }, { “名称”：“澳大利亚”， “国家”：[{ “名称”：“NewSouthWales”， “城市”：[{ “姓名”：“悉尼” }] }, { “姓名”：“维多利亚”， “城市”：[{ “名称”：“墨尔本” }] }] }]; $scope.getStates=函数（）{ $scope.states=null； $scope.cities=null； console.log（$scope.country）； 如果（$scope.country！=null）{ var filteredCountry=$filter（“filter”）（$scope.countries，$scope.country）； if（filteredCountry！=null&&filteredCountry.length==1）{ $scope.states=filteredCountry[0]。状态； } } }; $scope.getCity=函数（）{ $scope.cities=null； 如果（$scope.state！=null）{ var filteredState=$filter（“filter”）（$scope.states，$scope.state）； if（filteredState！=null&&filteredState.length==1）{ $scope.cities=filteredState[0]。城市； } } }; 如果（$scope.country！=null）{ var filteredCountry=$filter（“filter”）（$scope.countries，$scope.country）； if（filteredCountry！=null&&filteredCountry.length==1）{ $scope.states=filteredCountry[0]。状态； var filteredState=$filter（“filter”）（$scope.states，$scope.state）； if（filteredState！=null&&filteredState.length==1）{ $scope.cities=filteredState[0]。城市； } } } $scope.alertCity=函数（）{ 警报（“您选择的”+$scope.city）； }; //console.log（$scope.countries）； }]); $（函数（）{ setTimeout（函数（）{ $（“选择”）.select2（）； }, 100); });

国家：
挑选
国家：
挑选
城市：
挑选

实际上，您也可以使用。因为您已经使用AngularJS填充了数据，所以完成了。因此，请查看以下代码段：

角度模块（'test'，[]） .controller（'TestController'，['$scope'，'$filter'，'， 函数（$scope$filter）{ $scope.country=“印度”； $scope.state=“拉贾斯坦邦”； $scope.city=“Ajmer”； $scope.countries=[{ “名称”：“印度”， “国家”：[{ “名称”：“马哈拉施特拉邦”， “城市”：[{ “名称”：“浦那” }, { “名称”：“孟买” }, { “名称”：“那格浦尔” }, { “名称”：“阿科拉” }] }, { “名称”：“中央邦”， “城市”：[{ “名称”：“印多尔” }, { “名称”：“博帕尔” }, { “姓名”：“贾巴尔普” }] }, { “名称”：“拉贾斯坦邦”， “城市”：[{ “名称”：“斋浦尔” }, { “名称”：“Ajmer” }, { “名称”：“焦特布尔” }] }] }, { “名称”：“美国”， “国家”：[{ “姓名”：“阿拉巴马州”， “城市”：[{ “姓名”：“蒙哥马利” }, { “姓名”：“伯明翰” }] }, { “名称”：“加利福尼亚”， “城市”：[{ “姓名”：“萨克拉门托” }, { “名称”：“弗里蒙特” }] }, { “名称”：“伊利诺伊州”，

<div ng-app="test">
    <div ng-controller="TestController">
        <div>Country:
            <select ng-model="country" ng-options="country.name as country.name for country in countries" ng-change="getStates()">
                <option value=''>Select</option>
            </select>
        </div>
        <div>States:
            <select id="state" ng-disabled="!country" ng-model="state" ng-options="state.name as state.name for state in states" ng-change="getCity()">
                <option value=''>Select</option>
            </select>
        </div>
        <div>City:
            <select id="city" ng-disabled="!country || !state" ng-model="city" ng-options="city.name as city.name for city in cities" ng-change="alertCity()">
                <option value=''>Select</option>
            </select>
        </div>
    </div>
</div>