使用ng选项从ng选项选择过滤器下拉菜单

Question

我想根据您在前一个选项中选择的内容过滤ng选项下拉菜单。这就是我想实现

如果选择内部1级则显示所有品牌层级

如果选择内部二级显示所有品牌层级> 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'} 
    ] 

Then：

添加函数来过滤对象。

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

这里是角

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; 

    }; 
});