Show/hide multiple divs based on a value in their attribute

Question

I asked this question earlier, but I think perhaps I worded it incorrectly and the answers that I got was how to show/hide a set of divs upon the click of a button. I understand how that can be done. However my problem is a bit different. I am trying to post a more elaborate and detailed question this time:

I have a bunch of divs that show images

<div ng-controller='PhotoController'>
  <button>SHOW ALL</button>
  <button>SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
     <img ng-src ='{{photo.src}}' data-show='{{photo.filtered}}'>
     <br/>
 </div>
</div>

The value for {{photo.filtered}} comes from database and will be an integer. What I want is that when SHOW FILTERED button is clicked, only those divs with class as image-containers should be shown which has an image inside it for which the data-show attributed will be non-zero.

Upon clicking SHOW ALL, all the photos will be shown irrespective of data-show value.

I know that if I add ng-show={{photo.filtered}} to the image-container div then I can show only the images which have data-show as non-zero. However I do not know how to change this criteria when SHOW ALL is clicked.

Any insight is appreciated.

Answer 1

ng-show ng-hide directives expect a experession so you can put a condition there like showAll || photo.filtered showAll || photo.filtered

<div ng-controller='PhotoController'>
  <button ng-click="showAll = true;>SHOW ALL</button>
  <button ng-click="showAll = false;">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='showAll || photoFiltered' class='image-container'>
     <img ng-src ='{{photo.src}}' data-show='{{photo.filtered}}'>
     <br/>
 </div>
</div>

with this code when show all is clicked then all divs will be visible either they have photo.filtered property is true or false but if you set showAll to false then only divs with photo.filtered property is true will be visible.

Answer 2

If this answer doesn't help, please explain why as a comment. I have added several more image-container divs to help simulate the entire thing for testing and deployment. Also, the reason for gathering the image-container each time the button is clicked is so that if you are updating the divs frequently with AJAX that none will be missing from the list when the program runs. Since you never specified and the nature of this program seems likely to use AJAX, I took the necessary precautions. Let me know if there is anything else I can do.

To set custom attributes with JavaScript. Use these functions... elem.getAttribute('attr-name');//get the attribute value elem.setAttribute('attr-name','attr-value');//set an attribute value

 window.onload = function() { var showAllButton = document.getElementById('showAllButton'); var showFilteredButton = document.getElementById('showFilteredButton'); showAllButton.onclick = function() { var containers = document.getElementsByClassName('image-container'); for (var i = 0; i != containers.length; i++) { containers[i].style.display = 'block'; } }; showFilteredButton.onclick = function() { var containers = document.getElementsByClassName('image-container'); for (var i = 0; i != containers.length; i++) { if (containers[i].children[0].getAttribute('data-show') > 0) { containers[i].style.display = 'block'; } else { containers[i].style.display = 'none'; } } }; };

 <div ng-controller='PhotoController'> <button id="showAllButton">SHOW ALL</button> <button id="showFilteredButton">SHOW FILTERED</button> <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'> <img ng-src='{{photo.src}}' data-show='14'>testing <br/> </div> <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'> <img ng-src='{{photo.src}}' data-show='5'>testing <br/> </div> <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'> <img ng-src='{{photo.src}}' data-show='0'>testing <br/> </div> </div>

Answer 3

Create a variable to control the show mode and a function to check if image can be showed, like this:

JS:

.controller('PhotoController', function($rootScope, $scope) {

    $scope.ShowAll = true;

    $scope.canShowImage = function(photo) {
        return ($scope.ShowAll || photo.filtered == 1);
    };

});

HTML:

<div ng-controller='PhotoController'>
  <button ng-click="ShowAll = true">SHOW ALL</button>
  <button ng-click="ShowAll = false">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
     <img ng-src ='{{photo.src}}' ng-show='canShowImage(photo)'>
     <br/>
 </div>
</div>

Hope this helps.

Answer 4

Something like the following

 $('.show_filtered').click(function(){
      $('.image-containers').hide();
      $.each($('.image-containers',function(i,v){
           if($(v).find('img:first()').data('show')) $(v).show();
      });
 });
 $('.show_all').click(function(){
      $('.image-containers').show();         
});