我想为我的网站制作变量选择下拉菜单。 基本上功能是:
我想要一个主要的下拉列表。
<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>
在它旁边有一个辅助下拉列表,根据选择的选项,值会发生变化。我的Angular经验有限,而且我无法专门找到任何相关信息。
我可以使用ng-options填写我的第一个下拉列表,这样可以正常工作。
<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>`
我的控制器里有一个
$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];
}
}
我很感激有关此事的任何指导。
答案 0 :(得分:1)
其他两个答案都有效,但似乎有点过度设计。这是我对你的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>
然后在你的控制器中定义:
$scope.options = [
{ name: "Option 1", subOptions: ["a", "b"] },
{ name: "Option 2", subOptions: ["c"] },
{ name: "Option 3", subOptions: ["d"] }
]
这是一个有效的jsFiddle示例:http://jsfiddle.net/BCK8w/
答案 1 :(得分:0)
试试这个,它应该为你做到这一点。
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>
基本上我持有与相关选项本身的子选项相关的数据,并且他们在指令内的选项上注册。