AngularJS Select

Last modified on: November 30, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="b5e85906-c314-4b15-828f-1d04f2b94d3a" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>AngularJS Select: Working with Dropdowns</h3>
<h4>Introduction</h4>
<p>In AngularJS, the <code>&lt;select&gt;</code> directive is used to create dropdown menus bound to data models. It is commonly used to allow users to choose from a list of predefined options. AngularJS provides features like two-way data binding, filtering, and dynamic option generation for dropdowns.</p>
<hr />
<h3>Creating a Simple Dropdown</h3>
<p><strong>JavaScript</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('SelectCtrl', function($scope) {
  $scope.colors = ['Red', 'Green', 'Blue', 'Yellow'];
  $scope.selectedColor = $scope.colors[0]; // Default selection
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="color"&gt;Choose a color:&lt;/label&gt;
&lt;select id="color" ng-model="selectedColor"&gt;
  &lt;option ng-repeat="color in colors" value="{{ color }}"&gt;{{ color }}&lt;/option&gt;
&lt;/select&gt;

&lt;p&gt;Selected Color: {{ selectedColor }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Dynamically Populating the Dropdown</h3>
<p><strong>JavaScript</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('SelectCtrl', function($scope) {
  $scope.countries = [
    { code: 'US', name: 'United States' },
    { code: 'CA', name: 'Canada' },
    { code: 'FR', name: 'France' }
  ];
  $scope.selectedCountry = $scope.countries[0]; // Default selection
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="country"&gt;Choose a country:&lt;/label&gt;
&lt;select id="country" ng-model="selectedCountry" ng-options="country.name for country in countries"&gt;
&lt;/select&gt;

&lt;p&gt;Selected Country: {{ selectedCountry.name }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Explanation</strong>:</p>
<ul>
<li>The <code>ng-options</code> directive creates options from objects.</li>
<li><code>ng-model</code> binds the selected option to the <code>$scope</code> model.</li>
</ul>
<hr />
<h3>Using <code>track by</code> for Unique Identifiers</h3>
<p>If the options have duplicate values or keys, you can use <code>track by</code> to handle them properly.</p>
<p><strong>JavaScript</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('SelectCtrl', function($scope) {
  $scope.people = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'John' } // Duplicate name
  ];
  $scope.selectedPerson = null;
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="person"&gt;Choose a person:&lt;/label&gt;
&lt;select id="person" ng-model="selectedPerson" ng-options="person.name for person in people track by person.id"&gt;
&lt;/select&gt;

&lt;p&gt;Selected Person: {{ selectedPerson.name }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Grouping Options</h3>
<p>You can group options in the dropdown using <code>group by</code>.</p>
<p><strong>JavaScript</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('SelectCtrl', function($scope) {
  $scope.cities = [
    { name: 'New York', country: 'USA' },
    { name: 'Los Angeles', country: 'USA' },
    { name: 'Paris', country: 'France' },
    { name: 'Toronto', country: 'Canada' }
  ];
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="city"&gt;Choose a city:&lt;/label&gt;
&lt;select id="city" ng-model="selectedCity" ng-options="city.name group by city.country for city in cities"&gt;
&lt;/select&gt;

&lt;p&gt;Selected City: {{ selectedCity.name }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Adding a Default "Please Select" Option</h3>
<p>Use an empty string as the default value.</p>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="fruit"&gt;Choose a fruit:&lt;/label&gt;
&lt;select id="fruit" ng-model="selectedFruit"&gt;
  &lt;option value=""&gt;-- Please select a fruit --&lt;/option&gt;
  &lt;option ng-repeat="fruit in ['Apple', 'Banana', 'Cherry']"&gt;{{ fruit }}&lt;/option&gt;
&lt;/select&gt;

&lt;p&gt;Selected Fruit: {{ selectedFruit || 'None' }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Filtering Dropdown Options</h3>
<p>You can use the <code>filter</code> directive to filter dropdown options based on a condition.</p>
<p><strong>JavaScript</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('SelectCtrl', function($scope) {
  $scope.numbers = [
    { value: 1, type: 'Odd' },
    { value: 2, type: 'Even' },
    { value: 3, type: 'Odd' },
    { value: 4, type: 'Even' }
  ];
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="number"&gt;Choose a number:&lt;/label&gt;
&lt;select id="number" ng-model="selectedNumber" ng-options="number.value for number in numbers | filter:{type: 'Even'}"&gt;
&lt;/select&gt;

&lt;p&gt;Selected Number: {{ selectedNumber }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Real-World Example: Dropdown with API Data</h3>
<p><strong>JavaScript</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>app.controller('APICtrl', function($scope, $http) {
  $http.get('https://jsonplaceholder.typicode.com/users')
    .then(function(response) {
      $scope.users = response.data;
    });
});
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML Template</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;label for="user"&gt;Choose a user:&lt;/label&gt;
&lt;select id="user" ng-model="selectedUser" ng-options="user.name for user in users"&gt;
&lt;/select&gt;

&lt;p&gt;Selected User: {{ selectedUser.name }}&lt;/p&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More