根据另一个选择角度过滤选择并保留第一行

Question

I'm trying to build double select with null option. 我正在尝试使用null选项构建双选。

One select is filtered according to the first select chosen option. 根据第一个选择的选项过滤一个选择。 The problem I have is I want to keep the first 'null' row even after filter. 我遇到的问题是我想在过滤后保留第一个'null'行。

I've made a plunker based on solution of null option I saw. 我根据我看到的null选项的解决方案做了一个plunker。 Here's the plunker: demo 这是plunker： demo

I am trying to select a country and in the cities, keep the 'null' option (anyCity) as a selectable option. 我试图选择一个国家和城市，保持'null'选项（anyCity）作为可选择的选项。 What is the best approach to achieve this? 实现这一目标的最佳方法是什么？

(My original problem consists of double filter--> selecting a city also filtering the country) （我原来的问题包括双重过滤 - >选择一个城市也过滤国家）

Html: HTML：

<body ng-controller="DemoCtrl">
<h3>Countries</h3>
  <p>Selected: {{country.selected || (country.selected === null ? 'null' : '')}}</p>
  <ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search" null-option="anyCountry">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>

  <h3>Cities</h3>
  <p>The loose-null option treats undefined the same as null.</p>
  <p>Selected: {{country2.selected || (country2.selected === null ? 'null' : '')}}</p>
  <ui-select ng-model="country2.selected" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a city in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="city in cities | filter: {country: country.selected.code}" null-option="anyCity" loose-null>
      <span ng-bind-html="city.name | highlight: $select.search"></span>
      <small ng-bind-html="city.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>
</body>
</html>

Answer 1

The issue is that there is a filter on cities which is trying to match each city's country against the selected country, and currently the 'Any city' option will not meet that criteria. 问题是cities中有一个过滤器，试图将每个城市的国家与所选国家进行匹配，目前“任何城市”选项都不符合该标准。

One approach would be to leave the filter as-is, but ensure that the 'Any city' option always meets the filter criteria. 一种方法是按原样保留过滤器，但确保“任何城市”选项始终满足过滤条件。 You could achieve this by setting a country property on the existing anyCity object and populate it with all possible cities. 您可以通过在现有anyCity对象上设置country属性并使用所有可能的城市填充它来实现此目的。

$scope.anyCity = {name: 'Any city', country:['GB', 'US', 'UM']};

Another approach is to change the filter to always allow the 'Any city' option. 另一种方法是将过滤器更改为始终允许“任何城市”选项。

View: 视图：

<ui-select-choices repeat="city in cities | filter: countryFilter" null-option="anyCity" loose-null>

Controller: 控制器：

$scope.countryFilter = function(city){
  return city === $scope.anyCity
  || city.country === $scope.country.selected.code;
}

Which is better? 哪个更好？ The first approach is simple in this example but for a long list of countries less ideal. 在这个例子中，第一种方法很简单，但对于一长串不太理想的国家而言。 If your data can change, you'd need to populate it dynamically. 如果您的数据可以更改，则需要动态填充它。 I prefer the second as it's more explicit what the intended functionality is. 我更喜欢第二种，因为它更明确的是预期的功能。

根据另一个选择角度过滤选择并保留第一行

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-02 19:51:32

根据另一个选择角度过滤选择并保留第一行

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-02 19:51:32

解决方案1
1 已采纳 2015-11-02 19:51:32