从 ng-options 选择中使用 ng-options 过滤下拉列表

Question

我正在尝试根据您在上一个 select 中的内容过滤 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() 函数放在过滤词之后，因为我想我可以创建一个函数来执行此操作，但我不知道如何处理它

感谢任何形式的帮助。谢谢

Answer 1

开:

<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>

Answer 2

这是标记

 <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>

这里是Angular

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;

});

这是您调试乐趣的现场演示 ;)

http://codepen.io/nicholasabrams/pen/EKyJLX

Answer 3

这是使用您的代码的有效 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;

    };
});

从 ng-options 选择中使用 ng-options 过滤下拉列表

Filter dropdown with ng-options from ng-options selection

javascript

angularjs

angularjs-ng-repeat

ng-options

angularjs-ng-options