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-show值如何，都会显示所有照片。

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

感谢任何见解。

Answer 1

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都可见 photo.filtered 属性为true或false但是如果设置 showAll 为false，只有 photo.filtered 属性为true的div才会显示。

Answer 2

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

使用JavaScript设置自定义属性。使用这些功能...... elem.getAttribute（＆＃39; attr-name＆＃39;）; //获取属性值 elem.setAttribute（＆＃39; attr-name＆＃39;，＆＃39; attr-value＆＃39;）; //设置属性值

＆＃13;

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';
      }
    }
  };
};

＆＃13;

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

＆＃13;

Answer 3

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

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

如下所示

<script>    
jQuery(document).ready(function() {     
   jQuery("#slider1").revolution({
      sliderType:"standard",
      sliderLayout:"auto",
      delay:9000, //<-- change this value (in milliseconds)
      navigation: {
          arrows:{enable:true}              
      },            
      gridwidth:1230,
      gridheight:720        
    });     
}); 
</script>

根据属性

4 个答案: