根据其他下拉列表过滤下拉列表 angularjs ng-option

Question

我正在尝试使用相同的 JSON 对象实现级联下拉选项来填充下拉菜单。

代码

var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {
  $scope.fruit1 = {};
  $scope.fruit2 = {};
  $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";
  $scope.fruit2.id = "2";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
  <div ng-controller="MainCtrl">
    1st list
    <select ng-model="fruit1.id" ng-options="x.id as x.value for x in fruits">
        </select>
    <br/> 2nd list
    <select ng-model="fruit2.id" ng-options="x.id as x.value for x in fruits">
        </select>
  </div>
</div>

现在，当我从第一个下拉列表中 select "Apple" 时，应该将其从第二个下拉列表中删除。我不知道如何实现它。

这是Fiddle

Answer 1

在下拉菜单中使用 ng-change。喜欢：

<select ng-model="fruit1.id" ng-options="x.id as x.value for x in fruits" ng-change = "removeFromList(fruit1.id)">
    </select>

在你的控制器中：

$scope.removeFromList(val){
//remove val from list
}

Answer 2

在使用过滤器和 ng-select 后找到了一个非常简单的解决方案。

只需在 ng-option 中添加过滤器即可。

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

它无所不能。这个答案让我的问题变得如此愚蠢。

UPDATED FIDDLE

根据其他下拉列表过滤下拉列表 angularjs ng-option

Filter Dropdown List depending on other dropdown list angularjs ng-option

json

angularjs

angularjs-filter

angularjs-ng-options