AngularJs conditional display for ng-options

Question

I've been searching for a few hours now and I can't seem to find the answer for my problem anywhere. I remember that I was able to implement it before but for some reason I lost the code and I can't seem to remember what I did to make it work.

I'm trying display data from an array in a select box using ng-options. That one I have no problems with. What I need to implement is that only certain array values will be displayed/included in the select box.

My data is as follows:

$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 } ];

And my HTML looks like:

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

So what I want to happen is that if the value of the attribute "active" is false then it's the only time the array item will be displayed/included in the select list. I've tried different permutations of the filter attribute but none seem to work.

I know I can easily use ng-repeat in the tag and use ng-show but I remember reading somewhere (again, I can't find where) that it's not the proper way to implement it and that using ng-options is the correct way.

I'm really really sure I was able to do it before without creating a custom javascript filter, but for the life of me I can't remember how I did it. I'm hoping someone can

Hope someone can help me with this because I'm out of ideas.

Update:

Great scott, I think I've got it.

Instead of:

filter:chart.active=='false'

It should be:

filter:chart.active='false'

It's just the number of equal signs used. facepalm

Thanks for the responses, everyone.

Forewoman

Your syntax seems to work for me perfectly? – Pedanticism

your code seems to be working only see here jsfiddle.net/vinodlouis/H6AZ2/1 – Stryker

@VinodLouis - Oh, dear, it does work on jsfiddle. Now I'm even more confused because it doesn't work on my dev environment. Thanks! I'll look into other factors, then. – Forewoman

@Pedanticism - It's so weird because it doesn't seem to work on my dev environment. VinodLouis has provided me with proof that it does work. Thanks for looking into it, anyway. – Forewoman

are u getting some error in console ? (try in FF and chrome both) – Stryker

@VinodLouis - There are errors in the console, but not related to my particular component (it's a shared project). – Forewoman

maybe some exception from another component breaks execution flow of your code. – Surculose

@OZ_ - Possibly. I am still looking into it. – Forewoman

Answer 1

Great scott, I think I've got it.

Instead of:

filter:chart.active=='false'

It should be:

filter:chart.active='false'

It's just the number of equal signs used. facepalm

Thanks for the responses, everyone.

Forewoman

Answer 2

Hey Instead its better use

ng-options="chart.id as chart.name for chart in chartList | filter: {active: true}"

Sestos

I use angularjs 1.2.27, Sellaire's method not work, your method work. Thank you. – Nymphalid

Answer 3

this works.

filter:chart.active==false

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

Turncoat