使用AngularJS中的ngOptions隐藏其他列表中的选定选项

Hide selected option in other list using ngOptions in AngularJS

本文关键字：选项 列表 其他 AngularJS 中的 ngOptions 隐藏 使用      更新时间：2023-11-03

希望有人能帮助应对这一挑战。

我有一个阵列的机场正在使用两个单独的建设下降。

<select data-ng-model="flightData.origin" data-ng-options="airport.code as airport.label for airport in flightData.airports" name="origin"></select>

和

<select data-ng-model="flightData.destination" data-ng-options="airport.code as airport.label for airport in flightData.airports" name="destination"></select>

这两个列表显然有相同的选项。我想做的是，例如，当您在原点中选择"Sydney"时，从目标下拉列表中删除"Sydney"。

作为参考，这是机场数据的一个例子。

this.airports = [{
    code: "TSV",
    label: "Townsville",
}, {
    code: "PER",
    label: "Perth",
}, {
    code: "BNE",
    label: "Brisbane",
}, {
    code: "MEL",
    label: "Melbourne",
}, {
    code: "KGI",
    label: "Kalgoorlie",
}, {
    code: "SYD",
    label: "Sydney",
},{
    code: "LAX",
    label: "Los Angeles",
}, {
    code: "JFK",
    label: "New York",
}, {
    code: "DEL",
    label: "New Dehli",
}];

我知道我很可能需要两个单独的数组（1个用于原点，1个用于目的地），只是不知道如何处理它

谢谢！

使用ng-change，还需要两个列表。

<select data-ng-model="flightData.airports_origin" ng-change="changeOrigin()" data-ng-options="airport.code as airport.label for airport in flightData.airports" name="origin"></select>
<select data-ng-model="flightData.airports_destination"  data-ng-options="airport.code as airport.label for airport in flightData.airports" name="origin"></select>

在控制器中，注入filterFilter，然后在可用目的地机场列表中搜索所选机场并将其删除。

// in your controller
$scope.airports_origin      = angular.copy(this.airport); 
$scope.airports_destination = angular.copy(this.airport);
$scope.changeOrigin = function(){
    var selected_origin = flightData.origin;
    var destination_airport = filterFilter(this.airports_destination,{'code':selected_origin.code})[0];
    $scope.airports_destination.splice($scope.airports_destination.indexOf(destination_airport),1);
}
相关文章：