Javascript 基于属性中的值显示/隐藏多个div

我之前问过这个问题，但我想可能我的措辞不正确，我得到的答案是如何在点击按钮时显示/隐藏一组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}

的值来自数据库，将是一个整数。我想要的是，当单击ShowFiltered按钮时，只应显示那些类为

图像容器

的div，其中包含一个图像，并且

数据显示

属性将为非零

单击SHOW ALL（全部显示）后，将显示所有照片，而与数据显示值无关

我知道如果我将

ng show={{{photo.filtered}}

添加到

image container

div，那么我只能显示数据显示为非零的图像。但是，我不知道在单击“全部显示”时如何更改此条件

---

任何细节都值得欣赏。

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

JS:

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

    $scope.ShowAll = true;

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

});

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

HTML:

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

    $scope.ShowAll = true;

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

});

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

全部展示
显示过滤

---

希望这能有所帮助。

类似以下内容

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

---

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>

如果这个答案没有帮助，请解释原因作为评论。
我又添加了几个
图像容器
div来帮助模拟整个测试和部署过程。另外，每次单击按钮时收集
图像容器
的原因是，如果您使用AJAX频繁更新div，那么当程序运行时，列表中不会缺少任何div。由于您从未指定，而且该程序的性质似乎可能使用AJAX，因此我采取了必要的预防措施。如果还有什么我能做的，请告诉我

使用JavaScript设置自定义属性。使用这些函数。。。
元素getAttribute（'attr-name'）//获取属性值
元素setAttribute（'attr-name'，'attr-value'）//设置属性值


window.onload=function（）{
var showAllButton=document.getElementById（'showAllButton'）；
var showFilteredButton=document.getElementById（'showFilteredButton'）；
showAllButton.onclick=函数（）{
var containers=document.getElementsByClassName（'image-container'）；
for（var i=0；i！=containers.length；i++）{
容器[i].style.display='block'；
}
};
showFilteredButton.onclick=函数（）{
var containers=document.getElementsByClassName（'image-container'）；
for（var i=0；i！=containers.length；i++）{
if（容器[i].children[0].getAttribute（'data-show'）>0）{
容器[i].style.display='block'；
}否则{
容器[i].style.display='none'；
}
}
};
};

全部展示
显示过滤
测试


测试


测试


ng show=“allChecked | | photo.filtered”
？顺便说一句，不需要在标题中添加标签，标签系统存在的原因很好@Patrick感谢您关于标记标题并将其删除的建议。
ng hide=“currentFilterValue&&photo.filtered！=currentFilterValue”
，而按钮会将currentFilterValue设置为要显示的内容，或者设置为虚假值（如果要显示所有内容）。@Patrick:我认为
|
条件会起作用，但事实并非如此：(