如何使用 Angular js 制作搜索类型下拉列表？

Posted 2023-05-07

【中文标题】如何使用 Angular js 制作搜索类型下拉列表？

【英文标题】：How to make search type dropdown using angular js?

【发布时间】：2016-04-11 16:22:20

【问题描述】：

我有带有州和国家/地区的国家/地区列表。此代码使用级联下拉菜单。如何根据用户输入进行下拉

期望： 当我单击 Country Dropdown 时，如果用户输入基于输入的国家/地区列表（如搜索），则应出现一个带有列表的文本框。

我在下面添加了我的代码

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

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

mydemo 我想为每个下拉菜单引入一个过滤器。

【问题讨论】：

您实际上可以使用Select2 来做同样的事情。 AngularJS 是否特别需要它？

是的，我在 angularjs 中需要这个

您已经使用 AngularJS 实现了“注入”部分，对吧？好的，让我为您添加一个答案。告诉它是否适合你。

是的，你能帮我解决这个问题吗

检查我的答案并判断它是否有效。 :) 如果是您所期待的，请接受。另外，如果您需要更多更改，请告诉我。

【参考方案1】：

您实际上可以使用Select2 来做同样的事情。由于您已经在使用 AngularJS 填充数据，因此已经完成。所以检查一下这个sn-p：

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);
]);
$(function () 
  setTimeout(function () 
    $("select").select2();
  , 100);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<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>

【讨论】：

我如何使用我自己的 css 作为下拉菜单。是否可以为下拉菜单编写 css？

@komal 你有吗？你能分享一下吗，我可以帮你把 CSS 改成 Select2 使用的。所以它将是您在 Select2 布局中的 CSS。有帮助吗？

@komal 如果您需要进一步帮助，请告诉我。

你能检查一下这个***.com/questions/34649045/…

您的代码中存在一个错误。如果我更改国家/地区名称不为空其显示的旧值。但该列表会根据 selecton@Praveen Kumar 进行更改