根据属性中的值显示/隐藏多个 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 属性将非零。

点击“显示全部”后，将显示所有照片，而与data-showvalue 无关。

我知道如果我将ng-show={{photo.filtered}} 添加到image-container div 中，那么我只能显示数据显示为非零的图像。但是，当单击“显示全部”时，我不知道如何更改此标准。

感谢任何见解。

Answer 1

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

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 2

类似下面的东西

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

Answer 3

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

当点击 show all 时使用此代码，那么所有 div 都将可见，无论它们的 photo.filtered 属性是 true 还是 false，但如果您设置了 showAll 为 false 那么只有 photo.filtered 属性为 true 的 div 才会可见。

Answer 4

如果此答案没有帮助，请在评论中解释原因。 我添加了几个image-container div 来帮助模拟整个测试和部署。此外，每次单击按钮时收集image-container 的原因是，如果您经常使用 AJAX 更新 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>