根据另一个下拉列表的选择值，过滤并显示下拉列表的选项

Filter and display the options of a dropdown, based on the selected value of another dropdown

本文关键字：下拉列表 过滤 选项 显示 选择 另一个      更新时间：2023-09-26

我在angularJS中使用ng-options创建了两个下拉列表。下拉选项由两个不同的数组type_names和names填充。两个数组都包含对象作为元素。下面是HTML代码

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedTypeName" ng-options="item.id as item.text for item in type_names">
</select>
<select ng-model="selectedName" ng-options="item.id as item.text for item in names|filter:{type:'others'}">
</select>
</div>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
下面是AngularJS脚本 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.type_names = [
        {id: '0', type: 'me', text: 'Master of Computer Engineering'},
        {id: '1', type: 'msc', text: 'Master of Computer Science'},
        {id: '2', type: 'others', text: 'Others'}
    ];
    $scope.names = [
        {id: '', type: 'choose', text: 'Choose a Program'},
        {id: '0', type: 'msc', text: 'Masters - Information Systems Management'},
        {id: '1', type: 'msc', text: 'Masters - Software Engineering'},
        {id: '2', type: 'msc', text: 'Masters - Computer Security'},
        {id: '3', type: 'others', text: 'Bachelors of Computer Science'},
        {id: '4', type: 'others', text: 'Exchange Program'},
        {id: '5', type: 'others', text: 'Study Abroad'},
        {id: '6', type: 'others', text: 'Scientific Summer School'},
        {id: '7', type: 'others', text: 'French Summer School'},
        {id: '8', type: 'me', text: 'ME - Global IT Management'},
        {id: '9', type: 'me', text: 'ME -  Software Development and Multimedia'},
        {id: '10', type: 'me', text: 'ME - Systems, Networks and Security'}
    ];
});

正如你所看到的，我在第二个下拉菜单中使用了filter:{type:'others'}，所以它只会显示type: others的选项。现在我的目标是填充类型值(例如。根据第一个下拉框中选择的选项，自动设置filter:{type:'others'}中的me、others或msc)。为了可伸缩性和健壮性，我不想在HTML(分支)代码中使用if/else条件。

注意:我正在尝试使用AngularJS与Symfony2(PHP框架)

任何想法?

方案1

可以使用第一个下拉列表中的类型作为第二个下拉列表中的过滤器:

http://plnkr.co/edit/Bxr8I3tahgzRluI4TIaW?p =

预览
<select ng-model="selectedTypeName" 
        ng-options="item.type as item.text for item in type_names">
</select>
<select ng-model="selectedName" 
        ng-options="item.id as item.text for item in names|filter:{type:selectedTypeName}">
</select>

发生了什么:在第一个下拉列表中使用type:text pair而不是id:text pair。因此，第一个下拉列表的值将是type而不是id;

解决方案2

如果你想让id作为第一个select的值，而不是type，那么你可以使用ngChange:

http://plnkr.co/edit/IjcbVzSSqan8FJ98yRqA?p =

预览
<select ng-model="selectedTypeId" 
        ng-change="selectedType=(type_names|filter:{id:selectedTypeId})[0].type" 
        ng-options="item.id as item.text for item in type_names">
</select>
<select ng-model="selectedName" 
        ng-options="item.id as item.text for item in names|filter:{type:selectedType}">
</select>

发生了什么:每当在第一个下拉菜单中选择不同的选项时，它将selectedType更新为所选选项的类型。它用于过滤第二个下拉列表中的数据。

你可以默认下拉值(就像你做的那样:others)，通过在控制器中设置模型值:

$scope.selectedTypeId = '2';
$scope.selectedType = 'others';

简单的解决方案。

演示:小提琴

这可以很容易地完成使用过滤器。简单的技巧部分是filter: {id: '!' + fruit2.id} 

<select ng-model="fruit1.id" ng-options="x.id as x.value for x in fruits | filter: {id: '!' + fruit2.id}">
</select>
<select ng-model="fruit2.id" ng-options="x.id as x.value for x in fruits | filter: {id: '!' + fruit1.id}">
</select>
控制器内部

。

$scope.fruits = [
      {"id":"1","value":"Apple"},
      {"id":"2","value":"Banana"},
      {"id":"3","value":"Cherry"},
      {"id":"4","value":"Fig"},
      {"id":"5","value":"Grapes"}
    ];
        $scope.fruit1.id =  "1";
相关文章：