从angularjs下拉列表中删除空白选项

基础概念

AngularJS 是一个用于构建单页应用程序（SPA）的 JavaScript 框架。它通过双向数据绑定和依赖注入简化了前端开发。下拉列表（<select> 元素）是 HTML 中常用的表单控件，用于让用户从多个选项中选择一个。

类型

静态下拉列表：选项在 HTML 中静态定义。
动态下拉列表：选项通过 AngularJS 控制器动态生成。

应用场景

表单输入：用户需要从预定义的选项中选择一个值。
数据过滤：用户可以通过选择不同的选项来过滤显示的数据。

问题描述

在 AngularJS 中，下拉列表可能会出现空白选项，这通常是由于数据绑定或初始化问题引起的。

原因

数据未正确初始化：如果下拉列表的数据在初始化时为空，可能会出现空白选项。
默认选项：HTML <select> 元素默认会有一个空白的 value 选项。

解决方法

方法一：使用 `ng-options` 指令

ng-options 是 AngularJS 提供的一个指令，用于动态生成下拉列表的选项。它可以避免出现空白选项。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Dropdown</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <select ng-model="selectedOption" ng-options="option for option in options">
    </select>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.options = ["Option 1", "Option 2", "Option 3"];
            $scope.selectedOption = $scope.options[0];
        });
    </script>
</body>
</html>

方法二：使用 `ng-init` 指令

ng-init 指令可以在控制器初始化时设置默认值，避免出现空白选项。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS Dropdown</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl" ng-init="selectedOption = options[0]">
    <select ng-model="selectedOption" ng-options="option for option in options">
        <option value="" disabled>请选择</option>
    </select>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.options = ["Option 1", "Option 2", "Option 3"];
        });
    </script>
</body>
</html>