angularjs Hide objects with certain class when checkbox is checked

Question

I've looked up the ng-show directive but none of the examples seemed to fit my case.

I have a certain amount of divs with the class 'foo' which is dynamically generated based on some logic. I want to hide all the divs with that class when a checkbox is selected.

edit:

I solved it with this

<input type="checkbox" ng-model="hideClosed" checked>

<div ng-show="{{location.isOpen}}" ng-hide="hideClosed && {{!location.isOpen}}"></div>

Only problem now is that the checkbox does not start initially checked. I tried adding ng-checked="true" to the checkbox, but it didn't hide the closed ones until it was un-checked and checked again.

Answer 1

You could try giving each of the divs the ng-show attribute when they are dynamically generated. This will make them automatically hide or show depending on the model.

Then you can use the ng-checked attribute on the checkbox to bind the "checked" state of checkbox to the value in the model that shows and hides the elements.