使用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; 

    }; 
});