AngularJS Select

在AngularJS中，<select> 元素用来创建下拉选择框，通常用于从一组选项中选择一个值。

基本用法

下面是一个简单的例子，展示如何在AngularJS中使用 <select> 元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Select</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedFruit" ng-options="fruit for fruit in fruits">
</select>

<p>You selected: {{selectedFruit}}</p>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.fruits = ['Apple', 'Banana', 'Orange', 'Grapes'];
    });
</script>

</body>
</html>

在上面的例子中，我们定义了一个名为 selectedFruit 的模型变量，用来存储用户选择的水果。然后使用 ng-options 指令来循环遍历 fruits 数组中的水果，并将其显示在下拉列表中。

多选下拉框

如果需要允许用户选择多个选项，可以在 <select> 元素上添加 multiple 属性：

<select ng-model="selectedFruits" ng-options="fruit for fruit in fruits" multiple>
</select>

<p>You selected: {{selectedFruits}}</p>

在这种情况下，selectedFruits 将会是一个数组，存储用户选择的所有水果。

设置默认选项

如果想要在下拉框中设置一个默认选项，可以在控制器中初始化模型变量的值：

app.controller('myCtrl', function($scope) {
    $scope.fruits = ['Apple', 'Banana', 'Orange', 'Grapes'];
    $scope.selectedFruit = 'Banana';
});

这样在页面加载时，下拉框将默认选中 'Banana' 这个选项。

总结

在本章节中，我们学习了如何在AngularJS中使用 <select> 元素创建下拉选择框，包括基本用法、多选下拉框和设置默认选项。在下一章节中，我们将继续探讨AngularJS的其他功能和用法。