AngularJS ng-options 下拉框的详细指南

2024-03-08 13:44:09

AngularJS 中使用 ng-options 轻松创建下拉框

简介

下拉框是网站上常见的交互元素，允许用户从一组选项中进行选择。在 AngularJS 中，使用 ng-options 指令可以轻松动态创建下拉框，本文将详细介绍如何使用 ng-options 实现下拉框。

准备工作

在开始使用 ng-options 之前，需要准备一个包含要显示在下拉框中的选项的数组。数组中的每个选项都应该是一个包含 ID 和 Title 属性的对象。

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

使用 ng-options

准备好选项数组后，就可以使用 ng-options 指令创建下拉框。ng-options 指令的语法如下：

<select ng-options="item.ID as item.Title for item in items"></select>

在这个示例中，ng-options 指令将 $scope.items 数组绑定到下拉框。item.ID 属性被用作选项值，item.Title 属性被用作选项标签。

设置默认值

如果希望在页面加载时预先选择下拉框中的某一项，可以使用 ng-model 指令。ng-model 指令将下拉框绑定到一个范围变量，该变量存储当前选定的项。

<select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items"></select>

在页面加载时，初始化 selectedItem 范围变量以匹配要选择的项目的 ID。

$scope.selectedItem = '000002';

示例

以下是一个使用 ng-options 和 ng-model 创建下拉框的完整示例：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {
      $scope.items = [
        {ID: '000001', Title: 'Chicago'},
        {ID: '000002', Title: 'New York'},
        {ID: '000003', Title: 'Washington'},
      ];

      $scope.selectedItem = '000002';
    });
  </script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items"></select>
</body>

</html>