Javascript AngularJS：通过计算属性值来显示/隐藏多个div_Javascript_Jquery_Html_Css_Angularjs

Javascript AngularJS：通过计算属性值来显示/隐藏多个div

javascript jquery html css angularjs

Javascript AngularJS：通过计算属性值来显示/隐藏多个div,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我在一个循环中有许多div： <div ng-controller='PhotoController'> <div ng-repeat="photo in photos" ng-show='isShowImage'> <img ng-src ='{{photo.src}}' data-show='yes'> <br/> </div> </div> 默认情况下，将显示所有照片。单击按钮时，我希望计算

我在一个循环中有许多div：

<div ng-controller='PhotoController'>
  <div ng-repeat="photo in photos" ng-show='isShowImage'>
     <img ng-src ='{{photo.src}}' data-show='yes'>
     <br/>
 </div>
</div>

默认情况下，将显示所有照片。单击按钮时，我希望计算每个图像的“数据显示”属性，如果该属性表示“否”，则将其隐藏

数据显示属性是来自数据库的值。对于图像，它将始终为是或否。我将有一个名为“全部显示”的按钮和另一个名为“显示过滤”的按钮“显示已筛选”单击应隐藏不显示数据的照片

我不知道如何做到这一点…非常感谢您提供的任何帮助

我想您正在搜索以下内容：

<body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <button ng-click="toggleCustom()">Custom</button>
        <span ng-hide="custom">From:
            <input type="text" id="from" />
        </span>
        <span ng-hide="custom">To:
            <input type="text" id="to" />
        </span>
        <span ng-show="custom"></span>
    </div>
</body>

angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
        $scope.custom = true;
        $scope.toggleCustom = function() {
            $scope.custom = $scope.custom === false ? true: false;
        };
}]);

这里有一个简单的解决方案

HTML:

控制器：

angular.module('myApp', [])
  .controller('PhotoController', ['$scope', function($scope) {
    $scope.isShowImage = true;
    $scope.photos = [
        {src: "img1", state: "yes", visible: true},
        {src: "img2", state: "no", visible: true},
        {src: "img3", state: "yes", visible: true},
    ];
    $scope.checkImg = function(){
        for(var i = 0; i<$scope.photos.length; i++) {
            if($scope.photos[i].state == "no") $scope.photos[i].visible = false;
        }
    }
  }]);

<div ng-app="myApp" ng-controller="PhotoController">
    <button ng-click="checkImg()">Check state</button>
    <div class="myImg" ng-repeat="photo in photos" ng-show='isShowImage'>
        <img ng-src ='{{photo.src}}' data-show='photo.state' ng-show="photo.visible">
    </div>
</div>

angular.module('myApp', [])
  .controller('PhotoController', ['$scope', function($scope) {
    $scope.isShowImage = true;
    $scope.photos = [
        {src: "img1", state: "yes", visible: true},
        {src: "img2", state: "no", visible: true},
        {src: "img3", state: "yes", visible: true},
    ];
    $scope.checkImg = function(){
        for(var i = 0; i<$scope.photos.length; i++) {
            if($scope.photos[i].state == "no") $scope.photos[i].visible = false;
        }
    }
  }]);