带有 ng-repeat 的 AngularJS 依赖下拉菜单 [英] AngularJS Dependent dropdown with ng-repeat
问题描述
我有两个下拉字段，其中第二个取决于第一个中的选择.
第一个下拉菜单的数据来自一个数据集.它列出了与帐户相关联的号码ng-repeat="option in acctList".
我想转到不同的数据集，找到匹配的帐号，然后显示与该帐户相关的客户.当第一个下拉菜单中没有选择任何内容时，第二个下拉菜单应不显示任何内容(空白).
这是我的两个下拉菜单:http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview
这是我的控制器:
angular.module("app", []).controller("MainCtrl", function($scope) {$scope.test = "这是一个测试";$scope.defnum = 1;$scope.acct_info = [{"Req": "必须",DefCom":1"},{"Req": "NoMUST",DefCom":5"},{"Req": "必须",DefCom":4"},{"Req": "必须",DefCom":7"}];$scope.cust_info = [{"客户": "1",通讯":1"},{"客户": "2",通讯":1"},{"客户": "3",通讯":4"},{"客户": "4",DefCom":4"},{"客户": "5",DefCom":7"},{"客户": "6",DefCom":7"},{"客户": "7",DefCom":7"}];});我添加了 ng-repeat="option in cust_info | filter:{ Com : filter.DefCom }" 尝试根据这个 SO 答案过滤第二个:从ng-options选择中过滤ng-options但它不起作用.我也看了这个教程:http:///kenhowardpdx.com/blog/2015/05/angular-ngrepeat-and-ngoptions-comparison/
然而，他使用 $watch ，我见过我不建议这样做，而且他必须为每个场景写出一个 if 循环，这不太理想.
我尝试过使用 ng-change，但我认为应该有更简单的方法，比如 filter 或 track by.我也想知道我是否应该从 ng-repeat 更改为 ng-option.有人知道一种简单的方法吗?
最好用 ng-options 绑定你选择的选项.请参阅下面的代码，希望对您有所帮助.
<h1>你好，Plunker！</h1><div ng-controller="MainCtrl"><p>{{测试}}</p><select ng-model="defcom" ng-options="opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >></选择><select ng-model="com" ng-options="opt.Customer for opt in cust_info | filter: {Com: defcom.DefCom}: true"></选择>在更改组合之前保留原始值
angular.module("app", []).controller("MainCtrl", function($scope) {$scope.test = "这是一个测试";$scope.acct_info = [...(将其放在您的数据定义下方)$scope.defcom = $scope.acct_info[0];var original_defcom = $scope.defcom;var original_com = $scope.com;参见 plunker:http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview
I have two drop down fields where the second one is dependent on the selection in the first.
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.
Here is my plunker with the two drop downs: http://plnkr.co/edit/jDitkge1rx6GJzkdElJO?p=preview
Here is my controller:
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"
}
];
});
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/
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.
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?
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>
EDIT: 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;
See plunker: http://plnkr.co/edit/YtdX0sBC4lHs0nX6D8Pu?p=preview
这篇关于带有 ng-repeat 的 AngularJS 依赖下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
