<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="main.js"></script>
<script src="countriesValue.js"></script>
<script src="parseFactory.js"></script>
<script src="typeaheadFocus.js"></script>
<script src="combobox.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="combobox.css">
</head>
<body>
<div ng-include="'partials.html'"></div>
<div class="container-fluid" ng-controller="TypeaheadCtrl as vm" style="padding-bottom:10em">
<h4>combobox implementation</h4>
<!-- <combobox source-array="vm.states"></combobox> -->
<combobox></combobox>
<combobox is-dynamic="true"></combobox>
<hr />
<h4>Static arrays</h4>
<pre>Model: {{vm.selected | json}}</pre>
<input type="text" placeholder="with trigger" ng-model="vm.selected" typeahead="state for state in vm.states | filter:$viewValue | limitTo:8"
class="form-control" typeahead-focus="" />
<input type="text" ng-model="vm.selected" typeahead="state for state in vm.states | filter:$viewValue | limitTo:8"
class="form-control"
placeholder="without" />
<hr>
<h4>Asynchronous results</h4>
<pre>Model: {{vm.asyncSelected | json}}</pre>
<input type="text" ng-model="vm.asyncSelected" placeholder="Locations loaded via $http"
typeahead="address.formatted_address as address.formatted_address for address in vm.getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control" />
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<hr>
<h4>Custom templates for results</h4>
<pre>Model: {{vm.customSelected | json}}</pre>
<input type="text" class="form-control" placeholder="Custom template" ng-model="vm.customSelected"
typeahead="state as state.name for state in vm.statesWithFlags | filter:{name:$viewValue}"
typeahead-template-url="customTemplate.html"
typeahead-focus="" />
</div>
</body>
</html>
(function(angular) {
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ui.combobox'])
.service('geolocationSvc', GeolocationSvc)
.controller('TypeaheadCtrl', TypeaheadCtrl)
function GeolocationSvc($http, $q, $timeout, STATES, STATES_WITH_FLAG){
var svc = this;
svc.fetch = function getLocation(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val,
sensor: false
}
}).then(function(response) {
return response.data.results.map(function(item) {
// return item.formatted_address;
return item;
});
});
}
svc.fetchStatic = function(val, objCollection){
var defer = $q.defer();
$timeout(function(){
defer.resolve(objCollection ? STATES_WITH_FLAG : STATES);
},500);
return defer.promise;
}
}
function TypeaheadCtrl(typeaheadParser, STATES, STATES_WITH_FLAG, geolocationSvc) {
var parseResult = typeaheadParser.parse('value as value.label for value in sourceArray');
console.log(parseResult);
// set vars
var vm = this;
vm.selected = undefined;
vm.states = STATES;
vm.statesWithFlags = STATES_WITH_FLAG;
// Any function returning a promise object can be used to load values asynchronously
vm.getLocation = geolocationSvc.fetch;
}
})(window.angular);
(function(angular) {
'use strict';
angular.module('ui.bootstrap.demo')
.value('countriesMock', [ // Taken from https://gist.github.com/unceus/6501985
{
name: 'Afghanistan',
code: 'AF'
}, {
name: 'Åland Islands',
code: 'AX'
}, {
name: 'Albania',
code: 'AL'
}, {
name: 'Algeria',
code: 'DZ'
}, {
name: 'American Samoa',
code: 'AS'
}, {
name: 'Andorra',
code: 'AD'
}, {
name: 'Angola',
code: 'AO'
}, {
name: 'Anguilla',
code: 'AI'
}, {
name: 'Antarctica',
code: 'AQ'
}, {
name: 'Antigua and Barbuda',
code: 'AG'
}, {
name: 'Argentina',
code: 'AR'
}, {
name: 'Armenia',
code: 'AM'
}, {
name: 'Aruba',
code: 'AW'
}, {
name: 'Australia',
code: 'AU'
}, {
name: 'Austria',
code: 'AT'
}, {
name: 'Azerbaijan',
code: 'AZ'
}, {
name: 'Bahamas',
code: 'BS'
}, {
name: 'Bahrain',
code: 'BH'
}, {
name: 'Bangladesh',
code: 'BD'
}, {
name: 'Barbados',
code: 'BB'
}, {
name: 'Belarus',
code: 'BY'
}, {
name: 'Belgium',
code: 'BE'
}, {
name: 'Belize',
code: 'BZ'
}, {
name: 'Benin',
code: 'BJ'
}, {
name: 'Bermuda',
code: 'BM'
}, {
name: 'Bhutan',
code: 'BT'
}, {
name: 'Bolivia',
code: 'BO'
}, {
name: 'Bosnia and Herzegovina',
code: 'BA'
}, {
name: 'Botswana',
code: 'BW'
}, {
name: 'Bouvet Island',
code: 'BV'
}, {
name: 'Brazil',
code: 'BR'
}, {
name: 'British Indian Ocean Territory',
code: 'IO'
}, {
name: 'Brunei Darussalam',
code: 'BN'
}, {
name: 'Bulgaria',
code: 'BG'
}, {
name: 'Burkina Faso',
code: 'BF'
}, {
name: 'Burundi',
code: 'BI'
}, {
name: 'Cambodia',
code: 'KH'
}, {
name: 'Cameroon',
code: 'CM'
}, {
name: 'Canada',
code: 'CA'
}, {
name: 'Cape Verde',
code: 'CV'
}, {
name: 'Cayman Islands',
code: 'KY'
}, {
name: 'Central African Republic',
code: 'CF'
}, {
name: 'Chad',
code: 'TD'
}, {
name: 'Chile',
code: 'CL'
}, {
name: 'China',
code: 'CN'
}, {
name: 'Christmas Island',
code: 'CX'
}, {
name: 'Cocos (Keeling) Islands',
code: 'CC'
}, {
name: 'Colombia',
code: 'CO'
}, {
name: 'Comoros',
code: 'KM'
}, {
name: 'Congo',
code: 'CG'
}, {
name: 'Congo, The Democratic Republic of the',
code: 'CD'
}, {
name: 'Cook Islands',
code: 'CK'
}, {
name: 'Costa Rica',
code: 'CR'
}, {
name: 'Cote D\'Ivoire',
code: 'CI'
}, {
name: 'Croatia',
code: 'HR'
}, {
name: 'Cuba',
code: 'CU'
}, {
name: 'Cyprus',
code: 'CY'
}, {
name: 'Czech Republic',
code: 'CZ'
}, {
name: 'Denmark',
code: 'DK'
}, {
name: 'Djibouti',
code: 'DJ'
}, {
name: 'Dominica',
code: 'DM'
}, {
name: 'Dominican Republic',
code: 'DO'
}, {
name: 'Ecuador',
code: 'EC'
}, {
name: 'Egypt',
code: 'EG'
}, {
name: 'El Salvador',
code: 'SV'
}, {
name: 'Equatorial Guinea',
code: 'GQ'
}, {
name: 'Eritrea',
code: 'ER'
}, {
name: 'Estonia',
code: 'EE'
}, {
name: 'Ethiopia',
code: 'ET'
}, {
name: 'Falkland Islands (Malvinas)',
code: 'FK'
}, {
name: 'Faroe Islands',
code: 'FO'
}, {
name: 'Fiji',
code: 'FJ'
}, {
name: 'Finland',
code: 'FI'
}, {
name: 'France',
code: 'FR'
}, {
name: 'French Guiana',
code: 'GF'
}, {
name: 'French Polynesia',
code: 'PF'
}, {
name: 'French Southern Territories',
code: 'TF'
}, {
name: 'Gabon',
code: 'GA'
}, {
name: 'Gambia',
code: 'GM'
}, {
name: 'Georgia',
code: 'GE'
}, {
name: 'Germany',
code: 'DE'
}, {
name: 'Ghana',
code: 'GH'
}, {
name: 'Gibraltar',
code: 'GI'
}, {
name: 'Greece',
code: 'GR'
}, {
name: 'Greenland',
code: 'GL'
}, {
name: 'Grenada',
code: 'GD'
}, {
name: 'Guadeloupe',
code: 'GP'
}, {
name: 'Guam',
code: 'GU'
}, {
name: 'Guatemala',
code: 'GT'
}, {
name: 'Guernsey',
code: 'GG'
}, {
name: 'Guinea',
code: 'GN'
}, {
name: 'Guinea-Bissau',
code: 'GW'
}, {
name: 'Guyana',
code: 'GY'
}, {
name: 'Haiti',
code: 'HT'
}, {
name: 'Heard Island and Mcdonald Islands',
code: 'HM'
}, {
name: 'Holy See (Vatican City State)',
code: 'VA'
}, {
name: 'Honduras',
code: 'HN'
}, {
name: 'Hong Kong',
code: 'HK'
}, {
name: 'Hungary',
code: 'HU'
}, {
name: 'Iceland',
code: 'IS'
}, {
name: 'India',
code: 'IN'
}, {
name: 'Indonesia',
code: 'ID'
}, {
name: 'Iran, Islamic Republic Of',
code: 'IR'
}, {
name: 'Iraq',
code: 'IQ'
}, {
name: 'Ireland',
code: 'IE'
}, {
name: 'Isle of Man',
code: 'IM'
}, {
name: 'Israel',
code: 'IL'
}, {
name: 'Italy',
code: 'IT'
}, {
name: 'Jamaica',
code: 'JM'
}, {
name: 'Japan',
code: 'JP'
}, {
name: 'Jersey',
code: 'JE'
}, {
name: 'Jordan',
code: 'JO'
}, {
name: 'Kazakhstan',
code: 'KZ'
}, {
name: 'Kenya',
code: 'KE'
}, {
name: 'Kiribati',
code: 'KI'
}, {
name: 'Korea, Democratic People\'s Republic of',
code: 'KP'
}, {
name: 'Korea, Republic of',
code: 'KR'
}, {
name: 'Kuwait',
code: 'KW'
}, {
name: 'Kyrgyzstan',
code: 'KG'
}, {
name: 'Lao People\'s Democratic Republic',
code: 'LA'
}, {
name: 'Latvia',
code: 'LV'
}, {
name: 'Lebanon',
code: 'LB'
}, {
name: 'Lesotho',
code: 'LS'
}, {
name: 'Liberia',
code: 'LR'
}, {
name: 'Libyan Arab Jamahiriya',
code: 'LY'
}, {
name: 'Liechtenstein',
code: 'LI'
}, {
name: 'Lithuania',
code: 'LT'
}, {
name: 'Luxembourg',
code: 'LU'
}, {
name: 'Macao',
code: 'MO'
}, {
name: 'Macedonia, The Former Yugoslav Republic of',
code: 'MK'
}, {
name: 'Madagascar',
code: 'MG'
}, {
name: 'Malawi',
code: 'MW'
}, {
name: 'Malaysia',
code: 'MY'
}, {
name: 'Maldives',
code: 'MV'
}, {
name: 'Mali',
code: 'ML'
}, {
name: 'Malta',
code: 'MT'
}, {
name: 'Marshall Islands',
code: 'MH'
}, {
name: 'Martinique',
code: 'MQ'
}, {
name: 'Mauritania',
code: 'MR'
}, {
name: 'Mauritius',
code: 'MU'
}, {
name: 'Mayotte',
code: 'YT'
}, {
name: 'Mexico',
code: 'MX'
}, {
name: 'Micronesia, Federated States of',
code: 'FM'
}, {
name: 'Moldova, Republic of',
code: 'MD'
}, {
name: 'Monaco',
code: 'MC'
}, {
name: 'Mongolia',
code: 'MN'
}, {
name: 'Montserrat',
code: 'MS'
}, {
name: 'Morocco',
code: 'MA'
}, {
name: 'Mozambique',
code: 'MZ'
}, {
name: 'Myanmar',
code: 'MM'
}, {
name: 'Namibia',
code: 'NA'
}, {
name: 'Nauru',
code: 'NR'
}, {
name: 'Nepal',
code: 'NP'
}, {
name: 'Netherlands',
code: 'NL'
}, {
name: 'Netherlands Antilles',
code: 'AN'
}, {
name: 'New Caledonia',
code: 'NC'
}, {
name: 'New Zealand',
code: 'NZ'
}, {
name: 'Nicaragua',
code: 'NI'
}, {
name: 'Niger',
code: 'NE'
}, {
name: 'Nigeria',
code: 'NG'
}, {
name: 'Niue',
code: 'NU'
}, {
name: 'Norfolk Island',
code: 'NF'
}, {
name: 'Northern Mariana Islands',
code: 'MP'
}, {
name: 'Norway',
code: 'NO'
}, {
name: 'Oman',
code: 'OM'
}, {
name: 'Pakistan',
code: 'PK'
}, {
name: 'Palau',
code: 'PW'
}, {
name: 'Palestinian Territory, Occupied',
code: 'PS'
}, {
name: 'Panama',
code: 'PA'
}, {
name: 'Papua New Guinea',
code: 'PG'
}, {
name: 'Paraguay',
code: 'PY'
}, {
name: 'Peru',
code: 'PE'
}, {
name: 'Philippines',
code: 'PH'
}, {
name: 'Pitcairn',
code: 'PN'
}, {
name: 'Poland',
code: 'PL'
}, {
name: 'Portugal',
code: 'PT'
}, {
name: 'Puerto Rico',
code: 'PR'
}, {
name: 'Qatar',
code: 'QA'
}, {
name: 'Reunion',
code: 'RE'
}, {
name: 'Romania',
code: 'RO'
}, {
name: 'Russian Federation',
code: 'RU'
}, {
name: 'Rwanda',
code: 'RW'
}, {
name: 'Saint Helena',
code: 'SH'
}, {
name: 'Saint Kitts and Nevis',
code: 'KN'
}, {
name: 'Saint Lucia',
code: 'LC'
}, {
name: 'Saint Pierre and Miquelon',
code: 'PM'
}, {
name: 'Saint Vincent and the Grenadines',
code: 'VC'
}, {
name: 'Samoa',
code: 'WS'
}, {
name: 'San Marino',
code: 'SM'
}, {
name: 'Sao Tome and Principe',
code: 'ST'
}, {
name: 'Saudi Arabia',
code: 'SA'
}, {
name: 'Senegal',
code: 'SN'
}, {
name: 'Serbia and Montenegro',
code: 'CS'
}, {
name: 'Seychelles',
code: 'SC'
}, {
name: 'Sierra Leone',
code: 'SL'
}, {
name: 'Singapore',
code: 'SG'
}, {
name: 'Slovakia',
code: 'SK'
}, {
name: 'Slovenia',
code: 'SI'
}, {
name: 'Solomon Islands',
code: 'SB'
}, {
name: 'Somalia',
code: 'SO'
}, {
name: 'South Africa',
code: 'ZA'
}, {
name: 'South Georgia and the South Sandwich Islands',
code: 'GS'
}, {
name: 'Spain',
code: 'ES'
}, {
name: 'Sri Lanka',
code: 'LK'
}, {
name: 'Sudan',
code: 'SD'
}, {
name: 'Suriname',
code: 'SR'
}, {
name: 'Svalbard and Jan Mayen',
code: 'SJ'
}, {
name: 'Swaziland',
code: 'SZ'
}, {
name: 'Sweden',
code: 'SE'
}, {
name: 'Switzerland',
code: 'CH'
}, {
name: 'Syrian Arab Republic',
code: 'SY'
}, {
name: 'Taiwan, Province of China',
code: 'TW'
}, {
name: 'Tajikistan',
code: 'TJ'
}, {
name: 'Tanzania, United Republic of',
code: 'TZ'
}, {
name: 'Thailand',
code: 'TH'
}, {
name: 'Timor-Leste',
code: 'TL'
}, {
name: 'Togo',
code: 'TG'
}, {
name: 'Tokelau',
code: 'TK'
}, {
name: 'Tonga',
code: 'TO'
}, {
name: 'Trinidad and Tobago',
code: 'TT'
}, {
name: 'Tunisia',
code: 'TN'
}, {
name: 'Turkey',
code: 'TR'
}, {
name: 'Turkmenistan',
code: 'TM'
}, {
name: 'Turks and Caicos Islands',
code: 'TC'
}, {
name: 'Tuvalu',
code: 'TV'
}, {
name: 'Uganda',
code: 'UG'
}, {
name: 'Ukraine',
code: 'UA'
}, {
name: 'United Arab Emirates',
code: 'AE'
}, {
name: 'United Kingdom',
code: 'GB'
}, {
name: 'United States',
code: 'US'
}, {
name: 'United States Minor Outlying Islands',
code: 'UM'
}, {
name: 'Uruguay',
code: 'UY'
}, {
name: 'Uzbekistan',
code: 'UZ'
}, {
name: 'Vanuatu',
code: 'VU'
}, {
name: 'Venezuela',
code: 'VE'
}, {
name: 'Vietnam',
code: 'VN'
}, {
name: 'Virgin Islands, British',
code: 'VG'
}, {
name: 'Virgin Islands, U.S.',
code: 'VI'
}, {
name: 'Wallis and Futuna',
code: 'WF'
}, {
name: 'Western Sahara',
code: 'EH'
}, {
name: 'Yemen',
code: 'YE'
}, {
name: 'Zambia',
code: 'ZM'
}, {
name: 'Zimbabwe',
code: 'ZW'
}
])
.value('STATES', [
'Alabama',
'Alaska',
'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas',
'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon',
'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas',
'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
])
.value('STATES_WITH_FLAG', [{
'name': 'Alabama',
'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'
}, {
'name': 'Alaska',
'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'
}, {
'name': 'Arizona',
'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'
}, {
'name': 'Arkansas',
'flag': '9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'
}, {
'name': 'California',
'flag': '0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'
}, {
'name': 'Colorado',
'flag': '4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'
}, {
'name': 'Connecticut',
'flag': '9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'
}, {
'name': 'Delaware',
'flag': 'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'
}, {
'name': 'Florida',
'flag': 'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'
}, {
'name': 'Georgia',
'flag': '5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'
}, {
'name': 'Hawaii',
'flag': 'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'
}, {
'name': 'Idaho',
'flag': 'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'
}, {
'name': 'Illinois',
'flag': '0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'
}, {
'name': 'Indiana',
'flag': 'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'
}, {
'name': 'Iowa',
'flag': 'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'
}, {
'name': 'Kansas',
'flag': 'd/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'
}, {
'name': 'Kentucky',
'flag': '8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'
}, {
'name': 'Louisiana',
'flag': 'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'
}, {
'name': 'Maine',
'flag': '3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'
}, {
'name': 'Maryland',
'flag': 'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'
}, {
'name': 'Massachusetts',
'flag': 'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'
}, {
'name': 'Michigan',
'flag': 'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'
}, {
'name': 'Minnesota',
'flag': 'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'
}, {
'name': 'Mississippi',
'flag': '4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'
}, {
'name': 'Missouri',
'flag': '5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'
}, {
'name': 'Montana',
'flag': 'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'
}, {
'name': 'Nebraska',
'flag': '4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'
}, {
'name': 'Nevada',
'flag': 'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'
}, {
'name': 'New Hampshire',
'flag': '2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'
}, {
'name': 'New Jersey',
'flag': '9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'
}, {
'name': 'New Mexico',
'flag': 'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'
}, {
'name': 'New York',
'flag': '1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'
}, {
'name': 'North Carolina',
'flag': 'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'
}, {
'name': 'North Dakota',
'flag': 'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'
}, {
'name': 'Ohio',
'flag': '4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'
}, {
'name': 'Oklahoma',
'flag': '6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'
}, {
'name': 'Oregon',
'flag': 'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'
}, {
'name': 'Pennsylvania',
'flag': 'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'
}, {
'name': 'Rhode Island',
'flag': 'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'
}, {
'name': 'South Carolina',
'flag': '6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'
}, {
'name': 'South Dakota',
'flag': '1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'
}, {
'name': 'Tennessee',
'flag': '9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'
}, {
'name': 'Texas',
'flag': 'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'
}, {
'name': 'Utah',
'flag': 'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'
}, {
'name': 'Vermont',
'flag': '4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'
}, {
'name': 'Virginia',
'flag': '4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'
}, {
'name': 'Washington',
'flag': '5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'
}, {
'name': 'West Virginia',
'flag': '2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'
}, {
'name': 'Wisconsin',
'flag': '2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'
}, {
'name': 'Wyoming',
'flag': 'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.sdsvg.png'
}])
})(window.angular);
(function (angular) {
'use strict';
angular.module('ui.bootstrap.demo')
/**
* A helper service that can parse typeahead's syntax (string provided by users)
* Extracted to a separate service for ease of unit testing
*/
.factory('typeaheadParser', ['$parse', function ($parse) {
// 00000111000000000000022200000000000000003333333333333330000000000044000
var TYPEAHEAD_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+([\s\S]+?)$/;
return {
parse:function (input) {
var match = input.match(TYPEAHEAD_REGEXP);
if (!match) {
throw new Error(
'Expected typeahead specification in form of "_modelValue_ (as _label_)? for _item_ in _collection_"' +
' but got "' + input + '".');
}
return {
itemName:match[3],
source:$parse(match[4]),
viewMapper:$parse(match[2] || match[1]),
modelMapper:$parse(match[1])
};
}
};
}])
})(window.angular);
(function(angular) {
'use strict';
angular.module('ui.bootstrap.demo')
.directive('typeaheadFocus', typeaheadFocus);
function typeaheadFocus() {
return {
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
console.log('ngModel before focus:',ngModel);
ngModel.$parsers.push(function (inputValue) {
// dont put empty space to model
console.info(inputValue);
if(inputValue===' '){
return '';
}
return inputValue;
});
//trigger the popup on 'click' because 'focus'
//is also triggered after the item selection
element.bind('click', triggerPopup);
//compare function that treats the empty space as a match
scope.emptyOrMatch = emptyOrMatch;
/////
function triggerPopup() {
var viewValue = ngModel.$viewValue;
var modelValue = ngModel.$modelValue;
console.log(ngModel);
//restore to null value so that the typeahead can detect a change
if (ngModel.$viewValue === ' ') {
ngModel.$setViewValue('');
}
//force trigger the popup
ngModel.$setViewValue(' ');
//set the actual value in case there was already a value in the input
ngModel.$setViewValue(viewValue || ' ');
}
function emptyOrMatch(actual, expected) {
console.log(arguments);
if (expected == ' ') {
return true;
}
return actual.indexOf(expected) > -1;
}
}
};
}
})(window.angular);
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
(function(angular) {
'use strict';
angular.module('ui.combobox', ['ui.bootstrap'])
.directive('combobox', combobox)
.controller('ComboboxCtrl', ComboboxCtrl)
.directive('typeaheadStatic', typeaheadStatic)
.filter('typeaheadStaticFilter', typeaheadStaticFilter);
function typeaheadStaticFilter(filterFilter){
return filterFn;
function filterFn(input, params){
if(params===' '){
return input;
}
return filterFilter(input, params);
// return input
}
}
function typeaheadStatic($timeout) {
return {
restrict: 'A',
require: ['ngModel', '^combobox'],
link: linkFn
}
function linkFn(scope, element, attrs, ctrls) {
var ngModel = ctrls[0];
var comboboxCtrl = ctrls[1];
var deregisterFn = scope.$watch(watchExpr, listener);
ngModel.$parsers.push(parserFn);
scope.$on('$destroy',function(){
deregisterFn();
});
/////
function watchExpr(scope){
return comboboxCtrl.clicked;
}
function listener(isClicked){
if (isClicked) {
$timeout(showOptions);
}
}
function parserFn(inputValue){
// don't put empty space to model and save the current modelIf present
if(inputValue===' '){
return ngModel.$modelValue ? ngModel.$modelValue : '';
}
return inputValue;
}
function showOptions() {
var viewValue = ngModel.$viewValue;
//restore to null value so that the typeahead can detect a change
if (ngModel.$viewValue == ' ') {
ngModel.$setViewValue('');
}
//force trigger the popup
ngModel.$setViewValue(' ');
//set the actual value in case there was already a value in the input
// this is commented because we want show all options
// ngModel.$setViewValue(viewValue || ' ');
element[0].focus();
comboboxCtrl.toggleOptions();
}
}
}
function combobox() {
return {
restrict: 'E',
scope: {
'sourceArray': '=?',
'isDynamic': '=?'
},
controller: 'ComboboxCtrl',
controllerAs: 'ctrl',
bindToController: true,
templateUrl: 'combobox.html'
}
}
function ComboboxCtrl(geolocationSvc) {
var ctrl = this;
angular.extend(ctrl, {
clicked: false,
isLoading: false,
delay: 250,
selectedModel: {
"name": "Alabama",
"flag": "5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png"
},
toggleOptions: toggleOptions,
getData: geolocationSvc.fetch
});
activate();
//////
function activate(){
if(!ctrl.isDynamic && !ctrl.sourceArray){
geolocationSvc.fetchStatic('',true).then(function(response){
ctrl.sourceArray = response;
})
}
}
function toggleOptions(){
ctrl.clicked = !ctrl.clicked;
console.log('toggle autocomplete options to value:', ctrl.clicked);
}
}
})(window.angular);
<div ng-if="!ctrl.isDynamic" class="input-group is-static">
<input type="text" class="form-control" placeholder="Search for...static"
ng-model="ctrl.selectedModel"
typeahead="state as state.name for state in ctrl.sourceArray | typeaheadStaticFilter:$viewValue"
typeahead-static>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="ctrl.toggleOptions()"><i class="fa fa-chevron-down"></i></button>
</span>
</div>
<div ng-if="ctrl.isDynamic" class="input-group">
<input type="text" class="form-control" placeholder="Search for...dynamic"
ng-model="ctrl.selectedModel"
typeahead="state as state.formatted_address for state in ctrl.getData($viewValue) | limitTo:8"
typeahead-wait-ms="{{ ctrl.delay }}"
typeahead-loading="ctrl.isLoading">
<span class="input-group-addon">
<i ng-show="ctrl.isLoading" class="fa fa-refresh fa-spin"></i>
</span>
</div>
<code>model:</code>
<pre>{{ ctrl.selectedModel | json }}</pre>
<code>ctrl:</code>
<pre class="pre-scrollable">{{ ctrl | json }}</pre>
combobox{
.is-static{
.dropdown-menu{
max-height: 250px;
overflow: auto;
}
}
}