Выбор фильтра на основе другого выбора углового и сохранить первый ряд

Я пытаюсь построить двойной выбор с нулевым параметром.Выбор фильтра на основе другого выбора углового и сохранить первый ряд

Один выбор фильтруется в соответствии с первым выбранным вариантом. Проблема у меня есть, я хочу сохранить первую строку «null» даже после фильтра.

Я сделал плункер, основанный на решении нулевой опции, которую я видел. Здесь находится плункер: demo

Я пытаюсь выбрать страну и в городах, сохраните параметр «null» (anyCity) в качестве выбираемой опции. Каков наилучший подход для достижения этого?

(Моя исходная задача состоит из двойного фильтра -> выберите город также фильтрация страны)

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>

источник

2015-11-02 Ziv Weissman

Вопрос заключается в том, что есть фильтр на cities который пытается сопоставить страну каждого города с выбранной страной, и в настоящее время опция «Любой город» не будет соответствовать этим критериям.

Один из подходов состоит в том, чтобы оставить фильтр как есть, но убедитесь, что опция «Любой город» всегда соответствует критериям фильтра. Это можно сделать, установив объект country на существующий объект anyCity и заполнив его всеми возможными городами.

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

Другим подходом является изменение фильтра, чтобы всегда разрешать опцию «Любой город».

Вид:

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

Контроллер:

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

Что лучше? В этом примере первый подход прост, но для длинного списка стран менее идеальны. Если ваши данные могут измениться, вам нужно будет динамически их заполнять. Я предпочитаю второй, так как он более ясен, какова предполагаемая функциональность.

источник

2015-11-02 19:51:32 sheilak

Спасибо, я на самом деле пробовал что-то вроде этого, похоже, работает, только я использовал значения, разделенные запятыми, а не массив ... Предполагается, что он работает? (например, ваш первый пример) –

Да строка с значениями, разделенными запятой, будет работать, потому что 'filter:' соответствует подстроке [(docs)] (https://docs.angularjs.org/api/ng/filter/filter). Как уже упоминалось, я предпочитаю подход к функции области видимости для ясности и в случае изменения данных, но ваш должен работать надежно. – sheilak

Выбор фильтра на основе другого выбора углового и сохранить первый ряд

ответ

Смежные вопросы