Логический фильтр с флажком на AngularJS

У меня есть массив объектов со свойством published, которое может быть истинным или ложным. Я создаю фильтр, чтобы отображать только опубликованные или только не опубликованные элементы.

Пока опубликованный отлично работает вот так:

<input 
   type="checkbox" 
   ng-model="search.published" 
   ng-change="search.published = search.published ? true : undefined"> 
Published

А в ng-repeat это выглядит так:

ng-repeat="exhibitor in filterItems = (data | filter: search)"

Проблема возникает, когда я пытаюсь добавить еще один флажок, чтобы отображать только неопубликованные элементы.

Я пробовал это со вторым флажком:

<input 
   type="checkbox" 
   ng-model="search.published" 
   ng-change="search.published = search.published ? false : undefined"> 
Unpublished

Но, конечно, у него не может быть той же модели, что и у опубликованных предметов. Кроме того, флажок не будет отмечен, даже если я уберу первый флажок.

Какие-нибудь советы о том, как обойти это?


javascript checkbox angularjs angular-filters
person Eric Mitjans    schedule 24.07.2017    source источник
comment
Я понимаю, что вопрос касается использования флажков, но, возможно, это можно было бы преобразовать в вопрос UX ... имеет ли смысл использовать такие флажки? Вместо этого вы можете попробовать использовать радиокнопки или выбор, это избавит от хлопот по обходным путям и будет более интуитивно понятным   -  person Patrick Barr    schedule 24.07.2017
comment
Выбор @PatrickBarr действительно был правильным (:   -  person Eric Mitjans    schedule 24.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Флажки автоматически присваивают их ng-model значениям истинное или ложное значение, поэтому нет необходимости использовать ng-change таким, какой вы есть.

<input 
   type="checkbox" 
   ng-model="search.published">
Published

Если этот флажок установлен, search.published будет истинным. Если этот флажок не установлен, он будет ложным. То же самое и со вторым флажком, но вы должны использовать другое свойство ng-model.

<input 
   type="checkbox" 
   ng-model="search.unpublished"> 
Unpublished

Затем вам нужно будет создать собственный фильтр в вашем контроллере:

$scope.myCustomFilter = function(exhibitor) {
    if (exhibitor.published && exhibitor.published === $scope.search.published) {
        return exhibitor;
    } else if (!exhibitor.published && exhibitor.published === $scope.search.unpublished) {
        return exhibitor;
    }
};

Вам нужно будет убедиться, что вы определили $scope.search в своем контроллере.

$scope.search = {
    published: false,
    unpublished: false
};

Теперь для вашего ng-repeat:

ng-repeat="exhibitor in filterItems | filter:myCustomFilter"
person Daniel W.    schedule 24.07.2017