Фильтровать раскрывающееся меню с ng-опциями из опций ng-options

Question

Я пытаюсь отфильтровать раскрывающееся меню ng-options в зависимости от того, что вы выбрали в предыдущем. Это то, что я пытаюсь достичь

Если вы выбрали внутренний Tier 1, затем показать все Брендинг Tiers

Если вы выбрали Internal Tier 2 показать все Брендинг Tiers> 1

Если вы выбрали Internal Tier 3 шоу Брендинг Tier 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> 

, кажется, что у вас уже есть, где хранить выбранное значение.

нг-модель = "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> 

Вот Угловая

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; 

    }; 
});