AngularJS Dependent dropdown with ng-repeat
Question
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?
2 answers
solution1
1 ACCPTED 2016-04-09 00:16:10
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
solution2
1 2016-04-09 00:24:38
You need to set the value for the options as {{option.DefCom}} and set a model for the select. Then use that model as a filter for the next select. Also you need to use ng-init to set the current value for the select.
Here's a Plunker for you: http://plnkr.co/edit/hIyz5pXpsoD2QpR8uo2o?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.