Question

我在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的选项。现在我的目标是根据在第一个下拉列表中选择的选项自动填充me中的类型值（例如others，msc或filter:{type:'others'}）。为了可伸缩性和健壮性，我不想在HTML（twig）代码中使用if / else条件。

注意：我正在尝试将AngularJS与Symfony2（PHP框架）

一起使用

有什么想法吗？

Answer 1

解决方案1 

您可以将第一个下拉列表中的类型用作第二个过滤器：

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

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

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

<小时/> 解决方案2

如果您希望id作为第一个select而不是type的值，那么您可以使用ngChange：

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

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

发生了什么：每当在fiorst下拉列表中选择其他选项时，它会将selectedType更新为所选选项的类型。这用于在第二个下拉列表中过滤数据。

您可以通过在控制器中设置模型值来默认下拉值（就像您所做的那样：others）：

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

Answer 2

简单解决方案。

演示：Fiddle

使用过滤器可以轻松完成。简单的技巧部分是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";

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

2 个答案: