This time I will bring you AngularJSRealize select secondary linkageDrop-down menuDetailed step-by-step explanation, AngularJS implements select secondary linkage drop-down menuNotes What are they? Here are actual cases. Let’s take a look.
<!DOCTYPE html>
<html ng-app>
<head lang="en">
??<meta charset="UTF-8">
??<title></title>
</head>
<script src="../script/angular.js"></script>
<body ng-controller="Controller">
<p>所屬分類:
??<select ng-model="selected1" ng-options="m.roleName for m in classification1" ng-change="changeClassification(selected1)">
????<option value="">--?請選擇?--</option>
??</select>
??<select ng-model="selected2" ng-options="m.roleName for m in classification2">
????<option value="">--?請選擇?--</option>
??</select>
</p>
</body>
<script>
??var?contantCroleList?=?[
????{?"roleName"?:?"軟件開發(fā)",?"roleId"?:?"role1",?"children"?:?[
??????{?"roleName"?:?"軟件AAA",?"roleId"?:?"role11",?"children"?:?[]?},
??????{?"roleName"?:?"軟件BBB",?"roleId"?:?"role12",?"children"?:?[]},
??????{?"roleName"?:?"軟件CCC",?"roleId"?:?"role12",?"children"?:?[]},
??????{?"roleName"?:?"軟件DDD",?"roleId"?:?"role12",?"children"?:?[]},
??????{?"roleName"?:?"軟件EEE",?"roleId"?:?"role12",?"children"?:?[]},
??????{?"roleName"?:?"軟件FFF",?"roleId"?:?"role12",?"children"?:?[]}
????]},
????{?"roleName"?:?"硬件開發(fā)",?"roleId"?:?"role2",?"children"?:?[
??????{?"roleName"?:?"硬件AAA",?"roleId"?:?"role21",?"children"?:?[]?},
??????{?"roleName"?:?"硬件BBB",?"roleId"?:?"role22",?"children"?:?[]},
??????{?"roleName"?:?"硬件CCC",?"roleId"?:?"role23",?"children"?:?[]},
??????{?"roleName"?:?"硬件DDD",?"roleId"?:?"role24",?"children"?:?[]},
??????{?"roleName"?:?"硬件EEE",?"roleId"?:?"role25",?"children"?:?[]},
??????{?"roleName"?:?"硬件FFF",?"roleId"?:?"role26",?"children"?:?[]}
????]},
????{?"roleName"?:?"嵌入式開發(fā)",?"roleId"?:?"role3",?"children"?:?[
??????{?"roleName"?:?"嵌入式AAA",?"roleId"?:?"role31",?"children"?:?[]?},
??????{?"roleName"?:?"嵌入式BBB",?"roleId"?:?"role32",?"children"?:?[]},
??????{?"roleName"?:?"嵌入式CCC",?"roleId"?:?"role33",?"children"?:?[]},
??????{?"roleName"?:?"嵌入式DDD",?"roleId"?:?"role34",?"children"?:?[]},
??????{?"roleName"?:?"嵌入式EEE",?"roleId"?:?"role35",?"children"?:?[]},
??????{?"roleName"?:?"嵌入式FFF",?"roleId"?:?"role36",?"children"?:?[]}
????]}
??];
??function?Controller($scope)?{
????$scope.classification1?=?contantCroleList;
????$scope.changeClassification?=?function?(selected1)?{
??????$scope.classification2?=?selected1.children;
????};
??}
</script>
</html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
The above is the detailed content of Detailed explanation of the steps to implement select secondary linkage drop-down menu in AngularJS. For more information, please follow other related articles on the PHP Chinese website!