<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
title
>
AngularJS Custom Filter in ng-options
</
title
>
<
script
src
=
</
script
>
<
style
>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: green;
}
h3 {
color: blue;
}
.filter-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 20px;
}
.filter-input {
margin-bottom: 20px;
}
.filter-input label {
font-weight: bold;
margin-right: 10px;
}
input[type="text"] {
padding: 5px;
width: 200px;
}
select {
width: 220px;
padding: 5px;
}
</
style
>
</
head
>
<
body
ng-controller
=
"myController"
>
<
h1
>
GeeksforGeeks
</
h1
>
<
h3
>
Approach 2: Using Custom Filter in ng-options
</
h3
>
<
div
class
=
"filter-container"
>
<
div
class
=
"filter-input"
>
<
label
for
=
"countrySelect"
>
Filter by Country:
</
label
>
<
input
type
=
"text"
ng-model
=
"filterText"
id
=
"filterText"
placeholder
=
"Enter country"
>
</
div
>
<
div
>
<
label
for
=
"countrySelect"
>
Select a Country:
</
label
>
<
select
id
=
"countrySelect"
ng-model
=
"selectedCountry"
ng-options=
"country.name for country in countries |
filter: { name: filterText }">
<
option
value
=
""
style
=
"display:none;"
>
-- Select Country --
</
option
>
</
select
>
</
div
>
<
div
>
<
p
>
Selected Country: {{ selectedCountry.name }}
</
p
>
<
p
>
Country Code: {{ selectedCountry.code }}
</
p
>
</
div
>
</
div
>
<
script
>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.countries = [
{ name: "United States", code: "US" },
{ name: "Canada", code: "CA" },
{ name: "United Kingdom", code: "UK" },
{ name: "Germany", code: "DE" },
{ name: "France", code: "FR" },
{ name: "Australia", code: "AU" },
{ name: "India", code: "IN" },
{ name: "China", code: "CN" },
{ name: "Japan", code: "JP" },
{ name: "Brazil", code: "BR" }
];
$scope.filterText = "";
$scope.selectedCountry = {};
});
</
script
>
</
body
>
</
html
>