根据属性中的值显示/隐藏多个 div

Question

我之前问过这个问题，但我想也许我措辞不正确，我得到的答案是如何在单击按钮时显示/隐藏一组 div。 我明白如何做到这一点。 但是我的问题有点不同。 这次我试图发布一个更详细和详细的问题：

我有一堆显示图像的 div

<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>

{{photo.filtered}}的值来自数据库并且是一个整数。 我想要的是，当单击 SHOW FILTERED 按钮时，只有那些类为image-containers div 应该显示，其中有一个图像，其data-show属性将为非零。

单击 SHOW ALL 后，无论data-show值如何，都将显示所有照片。

我知道如果我将ng-show={{photo.filtered}}到image-container div 中，那么我只能显示数据显示为非零的图像。 但是，我不知道如何在单击 SHOW ALL 时更改此条件。

任何见解表示赞赏。

Answer 1

ng-show ng-hide指令需要一个表达式，所以你可以在那里放置一个条件，比如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>

使用此代码单击全部显示时，所有 div 都将可见，无论它们的photo.filtered属性为 true 还是 false，但如果将showAll设置为 false，则只有photo.filtered属性为 true 的 div 可见。

Answer 2

如果此答案没有帮助，请在评论中解释原因。 我添加了更多image-container div 来帮助模拟整个测试和部署。 此外，每次单击按钮时收集image-container的原因是，如果您经常使用 AJAX 更新 div，则程序运行时列表中不会丢失任何 div。 由于您从未指定并且此程序的性质似乎很可能使用 AJAX，因此我采取了必要的预防措施。 如果还有什么我可以做的，请告诉我。

使用 JavaScript 设置自定义属性。 使用这些函数... elem.getAttribute('attr-name');//获取属性值 elem.setAttribute('attr-name','attr-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

创建一个变量来控制显示模式和一个函数来检查图像是否可以显示，如下所示：

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>

希望这可以帮助。

Answer 4

类似于以下内容

 $('.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();         
});