How do you create dynamic dropdown lists in AngularJS using ng-options?

Working with Select Using AngularJS's ng-options

In AngularJS, the ng-options directive allows you to dynamically generate elements for a based on an array or object data source. It provides a simple way to create drop-down lists that can be bound to scope variables.

Generating Options from an Array

To generate options from an array, use the following syntax:

<select ng-model="selectedValue" ng-options="item.value as item.label for item in items">

where:

• selectedValue is the model variable that will be bound to the selected option
• items is the array containing the data for the options
• item.value is the value to be used for the value attribute of the option element
• item.label is the text to be displayed for the option element

Example

Consider the following AngularJS controller:

$scope.items = [
  {id: '000001', title: 'Chicago'},
  {id: '000002', title: 'New York'},
  {id: '000003', title: 'Washington'}
];

To render this data as a

with options corresponding to each item's title and id values, use the following code:

<select ng-model="selectedItem" ng-options="item.id as item.title for item in items">

Selecting a Default Option

To select a specific option by default, use the ng-init directive:

<select ng-model="selectedItem" ng-init="selectedItem = items[1]" ng-options="item.id as item.title for item in items">

Customizing the Default Option

By adding a custom child to the with an empty value attribute, you can create a custom default option:

<select ng-model="selectedItem">
  <option value="">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

Hiding the Default Option After Selection

To hide the custom default option after a selection is made, use ng-hide:

<select ng-model="selectedItem">
  <option value="" ng-hide="selectedItem">Select One</option>
  <option ng-repeat="item in items" ng-value="item.id">{{item.title}}</option>
</select>

The above is the detailed content of How do you create dynamic dropdown lists in AngularJS using ng-options?. For more information, please follow other related articles on the PHP Chinese website!

Array Object for select using Attribute default this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Test Coverage Tools: Ensuring Code Quality and ReliabilityNext article：Test Coverage Tools: Ensuring Code Quality and Reliability

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved