What is the difference between filter and ng-show in ng-repeat?

[Sanja Rogers]

Is there any difference between setting visibility in an ng-repeat using filter vs ng-show?

Using filter

<div ng-repeat="chart in charts | filter: {chart.selected_chart:true}">

<img src="{{chart.img_src}}">

</div>

Using ng-repeat

<div ng-repeat="chart in charts" ng-show="chart.selected_chart">

<img src="{{chart.img_src}}">

</div>

chart.selected_chart is bound to value input type checkbox so it will always be boolean

Is there any case where one would work and the other wouldn't?

In my case I couldn't get the filter to fire on the ng-repeat.  Changing the checkboxes does change the $scope.charts.selected_chart values but it doesn't filter them out of the dom.  Using watch on charts showed that watch was not being fired on charts object when checkboxes where changed. (even though the values in chart obj were changing)

[Josh David Miller]

Hello!

Yes, there is a difference. When you use a filter, the non-matching items are removed from the array before ever drawing the view; when using ngShow, the non-matching items will still be drawn and all bindings still bound up, but it just won't be visible due to a "display: none" CSS property.

But your filter isn't working due to a syntax problem. The object form of the filter is looking for a property and a value. Try this: "chart in charts | filter:{selected_chart: true}". This will filter all objects for a "selected_chart" value of "true".

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Sanja Rogers]

Thanks Josh!  I had that before "chart in charts | filter:{selected_chart: true}"

and it didn't work.  I changed it just to grasp at straws

I actually print the value: chart.selected_chart and it shows them all wether true or false.  I click the checkboxes, the printed values change but the filter does nothing

I think it's because the chart object is not alerting angular of the changes.  I have the following:

$scope.$watch('charts', function(newValue, oldValue) { console.log("charts change"); });

and it only prints once when the charts load.  It does not fire when check boxes are clicked.  I tried manually firing apply using a function in ng-click but it said apply was already in progress

[Josh David Miller]

Can you post a simple Plunker?

[Sanja Rogers]

Here is a plunker - however it works: http://plnkr.co/edit/GM1bRl

Making this I learned that charts watch doesn't get fired when the checkboxes are checked so that's not the issue.  In my code filter does nothing, the ng-show works.  In both cases the correct value is printed out via {{charts.selected_chart}} 

I don't know how to debug it any further or what could be the issue

There is also a strange GET error which happens in my code as well

 GET http://run.plnkr.co/VHyMIOq9QhAQVo7r/%7B%7Bchart.img_src%7D%7D 404 (Not Found)

[Sanja Rogers]

Ok I figured out the issue in my code.  The xhr call was returning an object of objects and in my angular app  $scope.charts is an array.  I was assigning the object to the array and it probably couldn't iterate properly.