Question

我需要过滤MAN和女人。在过滤器列表中，显示4个项目，并且应该只显示两个（男人和女人）或类别。

另一个问题是过滤器适用于ng-show =＆＃34; picture.checked＆＃34;而这只带来了我的1张影像，必须来BY CATEGORY，也就是说，当我点击女人时会显示两张图片，因为有两张图片的女人有相同的类别，同样适合男人。

已有的内容：

＆＃13;

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  
  $scope.devList = [
     { categoria: "woman", img: "http://extra.globo.com/incoming/14942281-f88-b8b/w448/Elisabeth-Reyes-mulher-Sergio-Sanchez.jpg" },
    { categoria: "woman", img: "http://extra.globo.com/incoming/14942281-f88-b8b/w448/Elisabeth-Reyes-mulher-Sergio-Sanchez.jpg" },
    { categoria: "man", img: "http://dicasmodafeminina.com/wp-content/uploads/2012/08/qualidades-de-homem-ideal-autoconfianca.jpg" },
    { categoria: "man", img: "http://dicasmodafeminina.com/wp-content/uploads/2012/08/qualidades-de-homem-ideal-autoconfianca.jpg" }
  ];
  
  
  $scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };
  
  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';
  
});

＆＃13;

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Checkboxes</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Checkboxes</h1>
    </ion-header-bar>
             
    <ion-content>
      
      <div class="list">
        
        <ion-checkbox ng-repeat="item in devList"
                      ng-model="item.checked" 
                      ng-checked="item.checked">
          {{ item.categoria }}
        </ion-checkbox>
      
        
      </div>
      
        
      <div class="imgs" ng-repeat="picture in devList" ng-show="picture.checked">
            <img width="200" ng-src="{{picture.img}}" width="100%" ng-click="showImage($index)"/>
       </div>
      
    </ion-content>
    
  </body>
</html>

＆＃13;

Answer 1

您可以使用单独的$scope.options对象，只有2个条目（男人，女人）来过滤列表，并根据每个项目的checked属性的状态显示/隐藏。< / p>

我通过循环$scope.options中的值来构建$scope.devList对象，因此它是动态的。

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  
  $scope.devList = [
     { categoria: "woman", img: "http://extra.globo.com/incoming/14942281-f88-b8b/w448/Elisabeth-Reyes-mulher-Sergio-Sanchez.jpg" },
    { categoria: "woman", img: "http://extra.globo.com/incoming/14942281-f88-b8b/w448/Elisabeth-Reyes-mulher-Sergio-Sanchez.jpg" },
    { categoria: "man", img: "http://dicasmodafeminina.com/wp-content/uploads/2012/08/qualidades-de-homem-ideal-autoconfianca.jpg" },
    { categoria: "man", img: "http://dicasmodafeminina.com/wp-content/uploads/2012/08/qualidades-de-homem-ideal-autoconfianca.jpg" }
  ];

  $scope.options = buildOptions();

  function buildOptions() {
    var ret = {};
    angular.forEach($scope.devList, function(item){
        ret[item.categoria] = { checked : false };
    });
    return ret;
 }
  
  $scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };
  
  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';
  
});

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Checkboxes</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Checkboxes</h1>
    </ion-header-bar>
             
    <ion-content>
      
      <div class="list">
        
        <ion-checkbox ng-repeat="(key,item) in options"
                      ng-model="item.checked" 
                      ng-checked="item.checked">
          {{ key}}
        </ion-checkbox>
      
        
      </div>
      
      
      <div class="imgs" ng-repeat="picture in devList" ng-show="options[picture.categoria].checked">          
            <img width="200" ng-src="{{picture.img}}" width="100%" ng-click="showImage($index)"/>
       </div>

    </ion-content>
    
  </body>
</html>

按类别筛选图像Checkbox AngularJS

已有的内容：

1 个答案: