具有ng-repeat的AngularJS依赖下拉列表 [英] AngularJS Dependent dropdown with ng-repeat
问题描述
我有两个下拉字段，第二个字段取决于第一个中的选择。
I have two drop down fields where the second one is dependent on the selection in the first.
第一个下拉列表的数据来自一个数据集。它列出了与帐户 ng-repeat =acctList中的选项相关联的数字。
The data for the first drop down comes from one data set. It lists the number associated with an account ng-repeat="option in acctList".
我想去到不同的数据集，找到匹配的帐号，然后显示与该帐户相关的客户。第二个下拉列表在第一个下拉列表中没有显示任何内容时（空白）。
I want to go to a different data set, find the account numbers that match, and then show the Customers that are related to that account. The second drop down should show nothing (blank) when nothing has been selected in the first.
这是我的两个下拉菜单： http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview
Here is my plunker with the two drop downs: http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview
这是我的控制器：
angular.module("app", [])
.controller("MainCtrl", function($scope) {
$scope.test = "This is a test";
$scope.defnum = 1;
$scope.acct_info = [
{
"Req": "MUST",
"DefCom": "1"
},
{
"Req": "NoMUST",
"DefCom": "5"
},
{
"Req": "MUST",
"DefCom": "4"
},
{
"Req": "MUST",
"DefCom": "7"
}
];
$scope.cust_info = [
{
"Customer": "1",
"Com": "1"
},
{
"Customer": "2",
"Com": "1"
},
{
"Customer": "3",
"Com": "4"
},
{
"Customer": "4",
"DefCom": "4"
},
{
"Customer": "5",
"DefCom": "7"
},
{
"Customer": "6",
"DefCom": "7"
},
{
"Customer": "7",
"DefCom": "7"
}
];
});
我在cust_info中添加了 ng-repeat =选项| filter：{Com ：filter.DefCom}尝试根据此SO答案过滤第二个：从ng-options选择中筛选ng-options
但它不起作用。我还看了一下本教程： http：/ /kenhowardpdx.com/blog/2015/05/angular-ngrepeat-and-ngoptions-comparison/
I added ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" to try to filter the second based on this SO answer: Filter ng-options from ng-options selection
But it's not working. I also took a stab looking at this tutorial: http://kenhowardpdx.com/blog/2015/05/angular-ngrepeat-and-ngoptions-comparison/
然而，他使用我的手表建议不要使用，并且他必须为每个场景写出一个if循环，这不太理想。
however, he uses $watch which I've seen is advised against, and he had to write out an if loop for every scenario, which is less than ideal.
我尝试过使用ng-change，但我认为应该有一种更简单的方法，比如过滤器或跟踪。我也想知道我是否应该从ng-repeat改为ng-option。任何人都有一个简单的方法可以做到这一点吗？
I've tried using ng-change, but I think there should be an easier way, like a filter or track by. I'm wondering also if I should change from ng-repeat to ng-option. Anyone have insight on an easy way to do this?
推荐答案
最好将你的选项与ng-options绑定。请参阅下面的代码，我希望它有所帮助。
It's better to bind the options of your select with ng-options. See my code below, I hope it helps.
<body ng-app="app">
<h1>Hello Plunker!</h1>
<div ng-controller="MainCtrl">
<p>{{ test }}</p>
<select ng-model="defcom" ng-options="opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >>
</select>
<select ng-model="com" ng-options="opt.Customer for opt in cust_info | filter: {Com: defcom.DefCom}: true">
</select>
</div>
编辑：保留原始值组合更改之前
keep the original values before combos are changed
angular.module("app", []).controller("MainCtrl", function($scope) {
$scope.test = "This is a test";
$scope.acct_info = [
.
.
.
(put this below your data definition)
$scope.defcom = $scope.acct_info[0];
var original_defcom = $scope.defcom;
var original_com = $scope.com;
请参阅plunker： http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview
See plunker: http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview
这篇关于具有ng-repeat的AngularJS依赖下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
