下拉式加輸入文本在angularjs和引導

我想有一個字段作爲下拉菜單，也作爲輸入文本字段，其中用戶可以從下拉菜單中選擇值或輸入文本。下拉式加輸入文本在angularjs和引導

我發現了類似的東西，下面是相同的代碼片段。

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

如何在角度中使用datalist並從其他api調用中獲取選項？

指用於工作的DataList平原的模型下面的鏈接 - >https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

來源

2017-09-04 Goutham Nithyananda

是你能解決這個問題？ –

使用$http service獲取的來自服務器的選項列表，然後使用ngRepeatoption元素來填充的列表模板中的選項。看下面的例子：

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

來源

2017-09-04 13:39:49

它像一個魅力工作！我在Mozilla和Chrome中遇到了一些小問題。我有一個龐大的mozilla下拉列表，所有的值都沒有顯示出來，在Chrome中我無法向下滾動。 –

[看看這裏]（https://stackoverflow.com/questions/43491711/how-to-give-scrolling-effect-in-datalist-dropdown），也許它可以幫助你添加滾動。 –

你嘗試用ng-submit對錶單標籤？

例：

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

而且對JS代碼：

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

來源

2017-09-04 13:06:22 Cupkek05

下拉式加輸入文本在angularjs和引導

回答

相關問題