ドロップダウンリストとドロップダウンリストから値を選択できる入力テキストフィールドとしても機能する単一のフィールドが必要です。anglejsとbootstrapのドロップダウンリストと入力テキスト
私は何か同様のものを見つけました、以下は同じもののコードスニペットです。
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Boston">
<option value="Cambridge">
</datalist>
データリストを角度で使用し、残りのAPIコールからオプションをフェッチする方法はありますか？フォームタグにng-submitてみてくださいました>https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
使用$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のドロップダウンの大きなリストがあります。 –
[こちらをご覧ください]（https://stackoverflow.com/questions/43491711/how-to-give-scrolling-effect-in-datalist-dropdown）、おそらくスクロールを追加するのに役立ちます。 –
-
は、データリスト平野の作業モデルについては、以下のリンクを参照してください？
Exemple：
<form ng-submit="submit()">
とJSコード上：
$scope.submit = function() {
///DO STUFF
};
あなたが問題を解決することができましたか？ –