AngularJS Select(选择框)

AngularJS Select（选择框）

在 AngularJS 中，<select> 元素用于创建下拉菜单或选择框，允许用户从多个选项中选择一个或多个。结合 AngularJS 的数据绑定和指令（如 ng-model、ng-options 等），我们可以轻松地控制和操作 <select> 元素的值和选项。

常见的 Select 使用方法

1. 基本的 Select 元素和数据绑定

ng-model 是 AngularJS 提供的一个指令，用于将表单控件的值与模型进行双向绑定。

示例：基本的 Select 元素和双向绑定

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Select 示例</title>
</head>
<body ng-controller="myController">
    <h1>You selected: {{ selectedColor }}</h1>

    <select ng-model="selectedColor">
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
    </select>

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

        app.controller('myController', function($scope) {
            $scope.selectedColor = 'Green';  // 默认选中的值
        });
    </script>
</body>
</html>

说明：

通过 ng-model="selectedColor" 将 select 元素的值绑定到 $scope.selectedColor。
默认情况下，selectedColor 被设置为 "Green"，因此页面加载时绿色选项会被选中。
当用户选择一个选项时，selectedColor 会自动更新，页面上的显示内容也会更新。

2. 使用 ng-options 动态生成选项

如果选项比较多或者动态生成，我们可以使用 ng-options 来简化代码。ng-options 允许我们根据一个数组或对象动态生成 <option> 元素。

示例：使用 ng-options 动态生成选项

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Select 动态生成选项</title>
</head>
<body ng-controller="myController">
    <h1>You selected: {{ selectedColor }}</h1>

    <select ng-model="selectedColor" ng-options="color for color in colors">
        <option value="">Select a color</option>  <!-- 默认的空选项 -->
    </select>

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

        app.controller('myController', function($scope) {
            $scope.colors = ['Red', 'Green', 'Blue'];  // 定义颜色数组
            $scope.selectedColor = 'Green';  // 默认选中的值
        });
    </script>
</body>
</html>

说明：

ng-options="color for color in colors" 会根据 colors 数组动态生成 <option> 元素。
colors 数组在控制器中定义，包含了可选择的颜色。
默认情况下，selectedColor 设置为 'Green'，页面加载时绿色会被选中。

3. 显示选项的标签和绑定的值

有时，您可能需要为每个选项显示不同的标签和绑定一个不同的值。可以通过使用 ng-options 来实现，类似于从数组对象中选择特定的属性。

示例：使用对象作为选项源

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Select 显示标签和绑定值</title>
</head>
<body ng-controller="myController">
    <h1>You selected: {{ selectedColor.name }}</h1>

    <select ng-model="selectedColor" ng-options="color.name for color in colors">
        <option value="">Select a color</option>  <!-- 默认的空选项 -->
    </select>

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

        app.controller('myController', function($scope) {
            $scope.colors = [
                {id: 1, name: 'Red'},
                {id: 2, name: 'Green'},
                {id: 3, name: 'Blue'}
            ];  // 每个选项都是一个对象，包含 id 和 name
            $scope.selectedColor = $scope.colors[1];  // 默认选中 Green
        });
    </script>
</body>
</html>

说明：

ng-options="color.name for color in colors" 根据 colors 数组中的对象动态生成选项。
每个对象有一个 id 和 name 属性，name 被用作显示文本。
ng-model="selectedColor" 绑定整个选中的对象，因此当用户选择一个颜色时，selectedColor 会是一个包含 id 和 name 的对象。

4. 多选 Select（Multiple Select）

AngularJS 也支持多选框，通过 multiple 属性和 ng-model 进行双向绑定。多选框可以让用户选择多个选项。

示例：多选 Select 元素

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS 多选 Select 示例</title>
</head>
<body ng-controller="myController">
    <h1>You selected: {{ selectedColors }}</h1>

    <select ng-model="selectedColors" ng-options="color for color in colors" multiple>
    </select>

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

        app.controller('myController', function($scope) {
            $scope.colors = ['Red', 'Green', 'Blue', 'Yellow'];  // 定义颜色数组
            $scope.selectedColors = ['Green', 'Blue'];  // 默认选中的多个值
        });
    </script>
</body>
</html>

说明：

使用 multiple 属性使 <select> 元素成为多选框。
ng-model="selectedColors" 绑定一个数组，在该数组中存储所选的所有颜色。
默认情况下，selectedColors 数组包含 'Green' 和 'Blue'，页面加载时这两个颜色将被选中。

5. 使用 ng-change 监听选择变化

ng-change 指令用于在选择框的值变化时执行特定的操作。例如，当用户选择某个颜色时，可以触发某些行为或计算。

示例：使用 ng-change 监听 Select 变化

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS ng-change 示例</title>
</head>
<body ng-controller="myController">
    <h1>You selected: {{ selectedColor }}</h1>

    <select ng-model="selectedColor" ng-options="color for color in colors" ng-change="colorChanged()">
    </select>

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

        app.controller('myController', function($scope) {
            $scope.colors = ['Red', 'Green', 'Blue'];
            $scope.selectedColor = 'Green';

            $scope.colorChanged = function() {
                alert('You changed the color to: ' + $scope.selectedColor);
            };
        });
    </script>
</body>
</html>

说明：

ng-change="colorChanged()" 监听 select 元素值的变化，并调用 colorChanged 方法。
每当用户选择一个不同的颜色时，会弹出一个提示框，显示用户选中的颜色。

总结

ng-model：将 <select> 元素的选中值与 AngularJS 模型进行双向绑定。
ng-options：用于动态生成 <option> 元素，通常与数组或对象结合使用。
multiple：允许用户选择多个选项。
ng-change：监听 <select> 元素值的变化，并执行某些操作。

AngularJS 提供了丰富的功能来处理 <select> 元素，使得表单控件的操作更加灵活和易于管理。