<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<!-- 第一个下拉框，数据绑定到 $scope.type1，数据源为 $scope.typeOptions1，选项改变之后的触发函数为 $scope.typeChange1 -->
<select
ng-model="type1"
ng-options="t.value as t.name for t in typeOptions1"
ng-change="typeChange1()"
></select>
<!-- 第二个下拉框，数据绑定到 $scope.type2，数据源为 $scope.typeOptions2 -->
<select
ng-model="type2"
ng-options="t.value as t.name for t in typeOptions2"
></select>
</div>
<script>
angular.module("myApp", []).controller("myCtrl", [
"$scope",
function ($scope) {
$scope.type1 = null; // 存放第一个下拉框选中的数据
$scope.type2 = null; // 存放第二个下拉框选中的数据
// 第一个下拉框的数据
$scope.typeOptions1 = [
{
name: "全部",
value: "1",
},
{
name: "今天",
value: "2",
},
{
name: "昨天",
value: "3",
},
{
name: "上一月",
value: "4",
},
];
// 第二个下拉框的数据
$scope.typeOptions2 = [];
// 第一个下拉框的触发函数，改变第二个下拉框的数据
$scope.typeChange1 = function () {
switch ($scope.type1) {
case "1": {
$scope.typeOptions2 = [
{ name: "11", value: "11" },
{ name: "12", value: "12" },
];
break;
}
case "2": {
$scope.typeOptions2 = [
{ name: "21", value: "21" },
{ name: "22", value: "22" },
];
break;
}
default:
$scope.typeOptions2 = [];
}
};
},
]);
</script>
</body>
</html>
