Фильтр Angularjs не нулевой

Попытка отфильтровать элементы с определенным свойством, которое не равно нулю Итак, для:

var details = [{name:'Bill', shortDescription: null}, {name:'Sally', shortDescription: 'A girl'}]

Я хотел бы показать только один li; тот, что для Салли. Это то, что я пробовал без успеха

<ul>
<li ng-repeat="detail in details | filter:{shortDescription:'!'}">
<p>{{detail.shortDescription}}</p>
</li>
</ul>

Любая идея, как я могу сделать это, не создавая собственный фильтр? Или даже так, как будет выглядеть пользовательский фильтр?


javascript angularjs angularjs-filter
person Scotty Bollinger    schedule 05.09.2013    source источник
comment
Другое решение: stackoverflow.com/a/24992197/257470   -  person andrew.fox    schedule 01.09.2017

Ответы (4)


arrow_upward
42
arrow_downward

Согласно https://github.com/angular/angular.js/issues/11573 для Angular >= 1.4 рекомендуется использовать '', который соответствует любому примитиву, кроме null/undefined.

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
person skalb    schedule 24.06.2015
comment
Спасибо за публикацию! - person James Drinkard; 09.08.2016
comment
Работает, спасибо. Но в этом случае синтаксис angularjs абсурден (filter--). - person MCurbelo; 05.06.2017
comment
@MCurbelo, моя любимая мозоль с синтаксисом фильтра заключается в том, что слово «фильтр» неоднозначно. Выполняется ли фильтрация для пустых описаний? Или отфильтровать из нулевые описания? Вы не можете сказать, глядя на код. Лучшее имя было бы filterOut или showOnly (с правильной семантикой). - person user2023861; 06.09.2017

arrow_upward
123
arrow_downward

Angular>=1.3.16 до последней версии (1.5.5 на момент написания/обновления) используйте '' (пустая строка) (или '!!' также работает)

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Пример: http://jsfiddle.net/TheSharpieOne/1mnachk6/

Угловой >=1.3.6 и ‹=1.3.15 используйте '!null'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!null'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Пример: http://jsfiddle.net/TheSharpieOne/4wxs67yv/

Angular >=1.2 и ‹=1.3.5 используйте '' (пустая строка) (также работает '!!')

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Пример: http://jsfiddle.net/TheSharpieOne/ovsqf17n/

Угловой ‹1,2 '!!'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

Пример: http://jsfiddle.net/TheSharpieOne/RGEdc/

В целом '!!' имеет наилучшую поддержку, но '' (пустая строка) рекомендуется и предназначен для этого.

person TheSharpieOne    schedule 05.09.2013
comment
Огромное спасибо. Искал в сети больше часа, так и не нашел - person Scotty Bollinger; 06.09.2013
comment
Без проблем. Он также отфильтровывает undefined. - person TheSharpieOne; 06.09.2013
comment
@TalasanNicholson, если он фильтрует значение null / undefined, тогда false будет в порядке. - person BrianS; 12.07.2014
comment
@TheSharpieOne это задокументировано? - person BrianS; 12.07.2014
comment
Похоже, это не работает с флажком value="!!" jsfiddle.net/2RBV9 - person Syl; 21.07.2014
comment
@sylouuu, null — это зарезервированное слово, вы не можете назвать свою модель null. Кроме того, ваш флажок выходил за рамки контроллера. Наконец, вам нужно будет использовать атрибут ngTrueValue, чтобы установить значение модели с флажком docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D Вот исправленная скрипка: jsfiddle.net/2RBV9/1 - person TheSharpieOne; 22.07.2014
comment
Спасибо @TheSharpieOne, мне пришлось поставить ng-true-value="!" и ng-false-value="!!" - person Syl; 22.07.2014
comment
Этот трюк не работает в 1.4.0-rc1. Я искал примечание об изменении для нового синтаксиса, но пока ничего не нашел. [ссылка]jsfiddle.net/a50kdaL0 - person Rob; 08.05.2015
comment
если список shortDescription является объектом и возвращает значение NULL для некоторой детали ДЛЯ ПРИМЕРА detail[0].shortDescription:null и для некоторой детали [1].shortDescription: {id:1}, пользователь может фильтровать, чтобы получить только ненулевые объекты,,, по фильтру: {shortDescription: {}} он покажет только объект detail[1].shortDescription. - person Ali Exalter; 18.01.2019

arrow_upward
6
arrow_downward

Я думаю, что это легче читать

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>
person Jens Alenius    schedule 11.02.2017
comment
существует множество решений для фильтрации нулевых значений, это то, что я предпочитаю - person alfredopacino; 04.06.2018
comment
Недостатком этого является то, что если у вас есть тысяча записей, все равно печатается столько тегов комментариев, сколько есть записей, не имеющих кратких описаний. Опция фильтра предотвращает это. - person James Gray; 29.01.2020

arrow_upward
1
arrow_downward

Стоит отметить, что для использования решения с пустыми кавычками вам нужно оставить компаратор по умолчанию false. Возможно, вы привыкли указывать true здесь в фильтрах вашего контроллера, например:

const myAssessments = 
       this.filterFilter(this.assessments, {userId: this.user.id}, true);

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

const activeAndHistoric = 
      this.filterFilter(filteredAssessments, {historicYear: ''}, false);
person IrishDubGuy    schedule 11.02.2017