Javascript 使用ng选项选择中的ng选项筛选下拉列表
我正在尝试根据您在上一个下拉列表中选择的内容筛选ng选项下拉列表。这就是我想要达到的目标 如果选择内部第1层,则显示所有品牌层 如果选择内部Tier 2,则显示所有品牌级别>1 如果选择内部第3层,则显示品牌第3b层 这是我的实际代码Javascript 使用ng选项选择中的ng选项筛选下拉列表,javascript,angularjs,angularjs-ng-repeat,ng-options,angularjs-ng-options,Javascript,Angularjs,Angularjs Ng Repeat,Ng Options,Angularjs Ng Options,我正在尝试根据您在上一个下拉列表中选择的内容筛选ng选项下拉列表。这就是我想要达到的目标 如果选择内部第1层,则显示所有品牌层 如果选择内部Tier 2,则显示所有品牌级别>1 如果选择内部第3层,则显示品牌第3b层 这是我的实际代码 $scope.lookUps = { companyTier: [ { Id: 1, Name: '1 - Partner Branded'}, { Id: 2, Name: '2 - Co-branded'},
$scope.lookUps = {
companyTier: [
{ Id: 1, Name: '1 - Partner Branded'},
{ Id: 2, Name: '2 - Co-branded'},
{ Id: 3, Name: '3a - Answer Branded'},
{ Id: 4, Name: '3b - Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]
};
这些是下拉列表
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Id as item.Name for
item in lookUps.companyTier | filter: filterTiers()">
<option value="">- Select Branding Tier Level -</option></select>
-选择内部层级别-
-选择品牌级别-
我把filterTiers()函数放在过滤词后面,因为我想我可以创建一个函数来实现这一点,但我不知道如何处理它
我感谢任何帮助。谢谢关于:
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
$scope.lookUps = {
companyTier: [
{ Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
{ Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
{ Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
{ Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]
};
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option></select>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Name for item in (lookUps.companyTier | filter: tierFilter)">
<option value="">- Select Branding Tier Level -</option></select>
然后:
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
$scope.lookUps = {
companyTier: [
{ Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
{ Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
{ Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
{ Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]
};
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option></select>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Name for item in (lookUps.companyTier | filter: tierFilter)">
<option value="">- Select Branding Tier Level -</option></select>
添加过滤对象的函数
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
控制器在更改后将如下所示:
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
$scope.lookUps = {
companyTier: [
{ Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
{ Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
{ Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
{ Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]
};
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option></select>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Name for item in (lookUps.companyTier | filter: tierFilter)">
<option value="">- Select Branding Tier Level -</option></select>
视图如下所示:
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
$scope.lookUps = {
companyTier: [
{ Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
{ Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
{ Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
{ Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]
};
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option></select>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Name for item in (lookUps.companyTier | filter: tierFilter)">
<option value="">- Select Branding Tier Level -</option></select>
-选择内部层级别-
-选择品牌级别-
这是标记
<div ng-app="soExample" ng-controller="dependantSelections" class="selections">
<select ng-model="lookUps.companyTier" ng-options="selection.name for selection in lookUps.internalTier" ng-change="showTier(lookUps.companyTier)">
<option value="">Please select a tier</option>
</select>
<select ng-model="lookUps.internalTier" ng-options="selection.name for selection in lookUps.internalTier | filter: lookUps.filter" ng-change="somethingElse(lookUps.companyTier)" ng-if="currentSelection">
<option value="">Please select an option</option>
</select>
</div>
以下是现场演示,以供您调试之用;)强>
这是一个使用您的代码的工作表,它应该符合您的要求
希望这有帮助
HTML
非常感谢,这正是我想要的。爱你