Question

要求是在控制器内显示所选选项，并根据当前选择的选项填充其他选项。 HTML代码段下方：＆lt; html ng-app =“myApp”＆gt; .... ＆lt; section ng-controller =“myCtrl”＆gt; ＆lt; select ng-model =“selectedName”ng-options =“x for x in category”＆gt; ＆LT; /选择＆GT; ＆lt; select ng-model =“selectedSubName”ng-options =“x for x category in subcategory”＆gt; ＆LT; /选择＆GT; ＆LT; /节＆gt; .... ＆LT; / HTML＆GT; 控制器使用：＆LT;脚本＆GT; var app = angular.module（'myApp'，[]）; app.controller（'myCtrl'，function（$ scope）{ $ scope.category = [“设计”，“UI”，“Web Stack”，“单元测试”]; //使用条件语句填充其他＆lt; select＆gt;的选项即子类别 $ scope.subcategory = [“HTML”，“CSS”，“JS”，“Java”]; }）; ＆LT; /脚本＆GT;

Answer 1

使用ng-change触发填充第二个列表的功能

<html ng-app="myApp">
....
 <section ng-controller="myCtrl">
  <select ng-model="selectedName" ng-options="x for x in category" ng-change="foo(selectedName)">
 </select>
  <select ng-model="selectedSubName" ng-options="x for x in subcategory">
 </select>
 </section>
....
</html>

在你的控制器中：

$scope.foo=function(category){
//conditional code to populate subcategory
}

Answer 2

如果您正在使用类别/子类别，我可以建议采用不同的方法。

首先像这样定义你的类别对象：

$scope.categories = {
    'Design': ['Photoshop','Illustrator'],
    'UI' : ["HTML", "CSS"],
    'Web Stack': ['PHP', 'Java']
}

现在你可以在html中做一些事情：

<select ng-model="selectedName" ng-options="x for x in Object.keys(categories)">
<select ng-model="selectedSubName" ng-options="x for x in categories[selectedName]">

请记住，这未经过测试，因此可能需要进行一些较小的更改，但如果我了解您需要的内容，则将其放在一个对象中是有意义的。

获取控制器内的选定值以填充AngularJS中的另一个<select>

2 个答案: