Dropdown plus input Text in angularjs and bootstrap

Question

I want to have a single field which acts as a drop down and also as a input text field , Where user can either select value from drop down or input a text.

I found something similar , below is the code snippet of the same.

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

How can use the datalist in angular and fetch the options from a rest api call?

refer the below link for working model of datalist plain -->https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

were you able to resolve the issue?

Stanislav Kvitash
– Stanislav Kvitash

2017-09-06 14:09:35 +00:00
Commented Sep 6, 2017 at 14:09 — Stanislav Kvitash
– Stanislav Kvitash, Commented Sep 6, 2017 at 14:09

Stanislav Kvitash · Accepted Answer · 2017-09-04 13:39:49Z

2

Use $http service to fetch the list of the options from the server and then use ngRepeat on option element to populate the list of the options in the template. See the example below:

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

answered Sep 4, 2017 at 13:39

Stanislav Kvitash

4,63221 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Goutham Nithyananda Over a year ago

It worked like a charm!! I faced few small issues in mozilla and chrome. I have a big list of dropdown in mozilla all the values are not shown and in chrome i am unable to scroll down.

Stanislav Kvitash Over a year ago

Take a look here, maybe it helps you to add scrolling.

Cupkek05 · Accepted Answer · 2017-09-04 13:06:22Z

0

Did you try with ng-submit on form tag ?

Exemple :

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

And on JS code :

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

answered Sep 4, 2017 at 13:06

Cupkek05

4681 gold badge6 silver badges23 bronze badges

Collectives™ on Stack Overflow

Dropdown plus input Text in angularjs and bootstrap

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related