angularjs和bootstrap中的下拉加输入文本答案

【问题标题】：Dropdown plus input Text in angularjs and bootstrapangularjs和bootstrap中的下拉加输入文本
【发布时间】：2018-02-12 17:21:57
【问题描述】：

我希望有一个作为下拉菜单和输入文本字段的字段，用户可以从下拉菜单中选择值或输入文本。

我发现了类似的东西，下面是相同的代码sn-p。

<input type="text" name="city" list="cityname">
<datalist id="cityname">
  <option value="Boston">
  <option value="Cambridge">
</datalist>

如何在 Angular 中使用数据列表并从 rest api 调用中获取选项？

datalist plain 的工作模型请参考以下链接 -->https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

【问题讨论】：

您能解决问题吗？

标签： javascript html angularjs twitter-bootstrap-3

【解决方案1】：

您尝试在表单标签上使用ng-submit 吗？

示例：

<form ng-submit="submit()">

关于 JS 代码：

        $scope.submit = function () {
        ///DO STUFF
    };

【讨论】：

【解决方案2】：

使用$http service 从服务器获取选项列表，然后在option 元素上使用ngRepeat 填充模板中的选项列表。请看下面的例子：

(function (angular) {
    'use strict';

    angular.module("demo", [])
        .service('CountriesService', ['$http', function CountriesService($http) {
            var countriesService = this;
            var countriesResult = null;

            countriesService.getCountries = getCountries;

            function getCountries() {
                if (!countriesResult) {
                    countriesResult = $http({
                        method: 'GET',
                        url: '//restcountries.eu/rest/v2/all'
                    }).then(function (res) {
                        return res.data;
                    });
                }
                return countriesResult;
            }

            return countriesService;
        }])
        .controller('Demo', ['CountriesService', function Demo(CountriesService) {
            var vm = this;

            vm.$onInit = onInit;
            vm.countryChanged = countryChanged;

            function onInit() {
                CountriesService.getCountries().then(function (res) {
                    vm.countries = res;
                });
            }

            function countryChanged(selectedCountry) {
                console.log(selectedCountry);
            }
        }]);
})(angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="demo" ng-controller="Demo as vm">
    <hr/>
    <input type="text" name="country" list="countryname" ng-model='vm.selectedCountry' ng-change="vm.countryChanged(vm.selectedCountry)">
    <datalist id="countryname">
        <option ng-repeat="country in vm.countries track by country.name" value={{::country.name}}></option>
    </datalist>
    <hr/>
    {{vm.selectedCountry}}
</div>

【讨论】：

它就像一个魅力！我在 Mozilla 和 chrome 中遇到了一些小问题。我在 mozilla 中有一个很大的下拉列表，所有值都没有显示，在 chrome 中我无法向下滚动。
Take a look here，也许它可以帮助你添加滚动。