javascript - 从ng-options选择中的ng-options过滤下拉列表

我正在尝试根据您在上一个中选择的内容来过滤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-model =“ 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>

关于javascript - 从ng-options选择中的ng-options过滤下拉列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35951104/