Условное отображение AngularJs для ng-options

Я искал несколько часов и нигде не могу найти ответ на свою проблему. Я помню, что я мог реализовать это раньше, но по какой-то причине я потерял код, и я не могу вспомнить, что я сделал, чтобы заставить его работать.

Я пытаюсь отобразить данные из массива в поле выбора, используя ng-options. С этим у меня проблем нет. Что мне нужно реализовать, так это то, что в поле выбора будут отображаться/включаться только определенные значения массива.

Мои данные следующие:

$scope.chartList = [ { "id" : 1, "name" : "chart 1", "order" : 1, "active" : false },
                     { "id" : 2, "name" : "chart 2", "order" : 2, "active" : true },
                     { "id" : 3, "name" : "chart 3", "order" : 3, "active" : true },
                     { "id" : 4, "name" : "chart 4", "order" : 4, "active" : true }, 
                     { "id" : 5, "name" : "chart 5", "order" : 5, "active" : true } ];

И мой HTML выглядит так:

<select ng-model="toAddChart" ng-options="chart.id as chart.name for chart in chartList | filter:chart.active=='false'">
  <option value=""></option>
</select>

Итак, что я хочу, так это то, что если значение атрибута «активный» является ложным, то это единственный раз, когда элемент массива будет отображаться/включаться в список выбора. Я пробовал разные перестановки атрибута фильтра, но ни один из них не работает.

Я знаю, что могу легко использовать ng-repeat в теге и использовать ng-show, но я помню, что где-то читал (опять же, я не могу найти где), что это неправильный способ его реализации и что использование ng-options является правильным путь.

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

Надеюсь, кто-то может помочь мне с этим, потому что у меня нет идей.

Обновление:

Отличный Скотт, думаю, у меня получилось.

Вместо:

filter:chart.active=='false'

Так должно быть:

filter:chart.active='false'

Это просто количество используемых знаков равенства. фейспалм

Спасибо за ответы, всем.


person Stellaire    schedule 02.10.2013    source источник
comment
Ваш синтаксис, кажется, отлично работает для меня?   -  person francisco.preller    schedule 02.10.2013
comment
ваш код работает, смотрите только здесь jsfiddle.net/vinodlouis/H6AZ2/1   -  person Vinod Louis    schedule 02.10.2013
comment
@VinodLouis - О, дорогой, это работает на jsfiddle. Теперь я еще больше запутался, потому что это не работает в моей среде разработки. Спасибо! Тогда я рассмотрю другие факторы.   -  person Stellaire    schedule 02.10.2013
comment
@francisco.preller - Это так странно, потому что, похоже, это не работает в моей среде разработки. VinodLouis предоставил мне доказательства того, что это работает. В любом случае, спасибо, что заглянули.   -  person Stellaire    schedule 02.10.2013
comment
вы получаете какую-то ошибку в консоли? (попробуйте и в ФФ и в хроме)   -  person Vinod Louis    schedule 02.10.2013
comment
@VinodLouis - в консоли есть ошибки, но они не связаны с моим конкретным компонентом (это общий проект).   -  person Stellaire    schedule 02.10.2013
comment
возможно, какое-то исключение из другого компонента прерывает поток выполнения вашего кода.   -  person OZ_    schedule 02.10.2013
comment
@OZ_ - Возможно. Я все еще изучаю это.   -  person Stellaire    schedule 02.10.2013


Ответы (3)


Отличный Скотт, думаю, у меня получилось.

Вместо:

filter:chart.active=='false'

Так должно быть:

filter:chart.active='false'

Это просто количество используемых знаков равенства. фейспалм

Спасибо за ответы, всем.

person Stellaire    schedule 14.03.2014

Эй, вместо этого лучше использовать

ng-options="chart.id as chart.name для диаграммы в chartList | filter: {active: true}"

person Prafull    schedule 10.05.2017
comment
Я использую angularjs 1.2.27, метод Селлэра не работает, ваш метод работает. Спасибо. - person Константин Золин; 27.01.2020

это работает.

filter:chart.active==false

http://jsfiddle.net/H6AZ2/116/

person Guto Moraes    schedule 20.05.2016