Fatal编程技术网
  • angularjs/
  • 在控制器内获取所选值以填充另一个<；选择>；在AngularJS

在控制器内获取所选值以填充另一个<；选择>；在AngularJS

angularjs select

在控制器内获取所选值以填充另一个<；选择>；在AngularJS,angularjs,select,controller,Angularjs,Select,Controller,要求在控制器内显示所选选项，并根据当前选择的选项填充其他选择。 下面是HTML代码片段： <html ng-app="myApp"> .... <section ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in category"> </select> <select ng-model="selectedSubName" n

要求在控制器内显示所选选项，并根据当前选择的选项填充其他选择。

下面是HTML代码片段：

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


....
....
所使用的控制器：

<script>
var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {

 $scope.category = ["Design", "UI", "Web Stack", "Unit Testing"];
 //Use Conditional Statements to populate options for the other <select> 
  i.e, subcategory

 $scope.subcategory = ["HTML", "CSS", "JS", "Java"];
});
</script>


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.category=[“设计”、“UI”、“Web堆栈”、“单元测试”]；
//使用条件语句填充其他语句的选项
i、 e，子类别
$scope.subcategory=[“HTML”、“CSS”、“JS”、“Java”]；
});
使用
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.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]">
请记住，这没有经过测试，因此可能需要一些较小的更改，但如果我了解您需要什么，将其放在一个对象中是有意义的。

我希望
即子类别
行被注释，或者在实际代码$scope.foo=函数（category）{//如果（category=='Design'）{alert（category）；$scope.subcategory=[“设计模式”，“UML”]；}我已经添加了上面的代码，这是显示带有设计的警报。但是，无法填充，这是一个JSFIDLE，它工作了，感谢它的工作。：） 
<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]">