angularJS 級聯下拉框
阿新 • • 發佈:2020-07-30
<!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>