[英]Filter dropdown with ng-options from ng-options selection
我试图根据您在上一个选择的内容来过滤ng-options下拉列表。 这就是我想要实现的
如果选择内部层1,则显示所有品牌层
如果您选择内部层2,则显示所有品牌层> 1
如果您选择内部层3,则显示品牌层3b
这是我的实际代码。
$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>
似乎您已经可以在其中存储所选值。
NG-模型= “companyData.InternalTierId”
我将在控制器中执行的操作是:
第一:
分开companyTier的对象:
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'}
]
然后:
添加功能以过滤对象。
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
更改后,控制器将如下所示:
$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>
这是使用您的代码的有效JSFiddle ,它应符合您的要求。
希望这可以帮助。
HTML
<div ng-controller="myController">
<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 ng-show="companyData.InternalTierId == 0"
value="">- Select Internal Tier Level -</option>
</select>
<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 | filterTiers:companyData.InternalTierId"
>
<option ng-show="companyData.Category == 0"
value="">- Select Branding Tier Level -</option>
</select>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
$scope.companyData = {};
$scope.companyData.Category = 0;
$scope.companyData.InternalTierId = 0;
$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' }
]
};
});
myApp.filter('filterTiers', function() {
return function(item, InternalTierId) {
if (!item) {
return null;
}
var arr = [];
for (var i in item) {
if (item[i].Id >= InternalTierId) {
arr.push(item[i]);
}
}
return arr;
};
});
这是标记
<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>
这是角
var soExample = angular.module('soExample', []);
soExample.controller('dependantSelections', function($scope) {
'use strict';
$scope.currentSelection = null;
$scope.lookUps = {
companyTier: [{
id: 1,
group: 1,
name: '1 - Partner Branded'
}, {
id: 2,
group: 2,
name: '2 - Co-branded'
}, {
id: 3,
group: 3,
name: '3a - Answer Branded'
}, {
id: 4,
group: 3,
name: '3b - Answer Branded'
}],
internalTier: [{
id: 1,
group: 1,
name: 'Tier 1'
}, {
id: 2,
group: 2,
name: 'Tier 2'
}, {
id: 3,
group: 3,
name: 'Tier 3'
}],
filter: function(curTier) {
return curTier === $scope.currentSelection;
}
};
function showTier(tier) {
$scope.currentSelection = tier;
}
function somethingElse(next) {
alert(next.name)
}
$scope.showTier = showTier;
$scope.somethingElse = somethingElse;
});
这是为您带来调试乐趣的现场演示;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.