I want to make variable selection dropdown menus for my site. Basically the functionality is this:
I want a main dropdown.
<select>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<select>
<option> a </option> //only show if option 1 chosen above
<option> b </option> //only show if option 1 chosen above
<option> c </option> //only show if option 2 chosen above
<option> d </option> //only show if option 3 chosen above
</select>
With a secondary dropdown right next to it, that changes in values depending on which option is selected. My Angular experience is limited and I'm having trouble finding any information on this specifically.
I can fill my first dropdown with ng-options which works fine.
<select class="myclass" ng-model="selection" ng-options="opt as opt.label for opt in Options"></select>
<select class="myclass" ng-model="selection2" ng-options="opt2 as opt2.label for opt2 in {{pick.options}}"></select>`
where in my controller I have a
$scope.Options=[{label:1},{label:2},{label:3}];
$scope.selection = $scope.Options[0];
//and here is where I run into problems.
$scope.subOptions1=[{label:a},{label:b}];
$scope.subOptions2=[{label:c}];
$scope.subOptions3=[{label:d}];
$scope.selection2 = selectSub();
$scope.pick = {options: pickSub()};
function pickSub(){
if ($scope.selection.label == 1) {
return 'subOptions1';
}
if ($scope.selection.label == 2) {
return 'subOptions2';
}
if ($scope.selection.label == 3) {
return 'subOptions3';
}
}
function selectSub(){
if ($scope.selection.label == 1) {
return= $scope.subOptions1[0];
}
if ($scope.selection.label == 2) {
return = $scope.subOptions2[0];
}
if ($scope.selection.label == 3) {
return = $scope.subOptions3[0];
}
}
I would appreciate any guidance in the matter.
Try this, it should do the trick for you.
http://plnkr.co/edit/RHfG9P?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.model={};
$scope.model.suboptions1 = [{name: "suboption1-1",}, {name: "suboption1-2"}];
$scope.model.suboptions2 = [{name: "suboption2-1",}, {name: "suboption2-2"}];
$scope.model.data=[{name: "option1",suboptions: $scope.model.suboptions1}, {name: "option2",suboptions: $scope.model.suboptions2}];
});
app.directive("optionsduo", [function() {
return {
restrict: "EA",
templateUrl: 'multiselectmovetmplt.html',
scope: {
data: '=',
},
link: function(scope, element, attrs) {
scope.$watch('optselected', function(val) {
console.log(scope.optselected);
scope.suboptions = scope.optselected.suboptions;
});
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div optionsduo data="model.data"></div>
</body>
</html>
<table>
<tr>
<td>
<select ng-model="optselected" ng-options="d.name for d in data"></select>
</td>
<td>
<select ng-model="suboptselected" ng-options="d.name for d in suboptions"> </select>
</td>
Basically I am holding the data pertinent to the suboptions in the relevant options themselves and them registering a watch on the options inside a directive.
Both of the other answers will work, but seem a little over-engineered. Here's my suggestion for your html:
<select data-ng-model="option" data-ng-options="option as option.name for option in options"></select>
<select data-ng-model="subOption" data-ng-options="subOption as subOption for subOption in option.subOptions"></select>
And then in your controller define this:
$scope.options = [
{ name: "Option 1", subOptions: ["a", "b"] },
{ name: "Option 2", subOptions: ["c"] },
{ name: "Option 3", subOptions: ["d"] }
]
Here's a working jsFiddle with the example: http://jsfiddle.net/BCK8w/