Question

我正在使用angularjs创建两组下拉列表。第一个下拉列表包含一个体育列表，第二个下拉列表包含一个法院列表，可以在其中播放所选的体育项目。所以当用户选择例如。在第一次下拉的网球，然后显示他/她可以打网球的球场。它看起来像这样：http://screencast.com/t/JFZ973IAILo7。请注意，选择“Court 1”，因为这是下拉列表中的第一项。

但是当我过滤包含法院的下拉列表，并且第一个法院不再在列表中时，没有项目被设置为选中。请注意，“Court 2”未设置为已选中： http://screencast.com/t/Fh1LvEgO

我的代码如下：下载体育：

<select ng-model="selected.sport" ng-options="sport.name for sport in sports" >
</select>

法院过滤下拉：

<select ng-model="selected.court" ng-options="court.name for court in courts  | filter:filterBySports" >
</select>

我的过滤器（使用下划线）：

 $scope.filterBySports=function(row) {
     if($scope.selected.sport!=undefined)
        return !!_.where(row.sports, {name:$scope.selected.sport.name}).length;
     else
         return true;
    };

所以我的问题是，如何在过滤时将第一项设置为选中？

Answer 1

您必须在过滤后将第一个项目指定为$scope.selected.court。我建议你试试$ watch和$ filter这样：

$scope.$watch("selected.sport",function(newValue,oldValue,scope){
        if (newValue){
            scope.filteredCourts = $filter('filter')(scope.courts,function(item){
                return item.sport == newValue.name;
            });

            if (scope.filteredCourts.length > 0){
                scope.selected.court = scope.filteredCourts[0];
            }
        }
    });

您的html现在绑定到filteredCourts：

<select ng-init="selected.court" ng-model="selected.court" 
         ng-options="court.name for court in filteredCourts">
</select>

DEMO

在angularjs中过滤时，选择框不显示所选项目

1 个答案: