Question

我在一个循环中有很多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>

行<img ng-src ='{{photo.src}}' data-show='yes'>的{{1}}值可以为是或否。

我的控制器就像：

data-show

默认显示所有照片。单击按钮时，我想评估每个图像的app.controller("PhotoController",function($scope) { $scope.isShowImage = true; // });属性，如果属性显示为data-show

，则隐藏它

data-show属性是来自数据库的值。对于图像，它将始终为是或否。我将有一个名为'Show All'的按钮和另一个名为'Show Filtered'的按钮。 “显示已过滤”单击应隐藏数据显示为无的照片

我不知道该怎么做...非常感谢任何帮助

Answer 1

我认为您正在搜索这样的内容：

<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;
        };
}]);

fiddle

Answer 2

这是一个简单的解决方案。

HTML：

<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;
        }
    }
  }]);

AngularJS：通过评估其属性值来显示/隐藏多个div

2 个答案: