Filtrar imagens por categoria com Checkbox AngularJS

18/03/2016

Preciso filtrar HOMEM e MULHER. Na lista de filtro, aparecem 4 itens, sendo que deveria aparecer somente 2(homem e mulher), ou seja, por categoria.

Outro problema � que o filtro � por ng-show="picture.checked" e isso me tr�s somente 1 imagem por check, preciso que venha POR CATEGORIA, ou seja, quando eu clicar em mulher aparecer duas imagens, pois h� duas imagens de mulher com a mesma categoria e o mesmo vale para o homem.

O que j� tenho:

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', function($scope) {
  
  $scope.devList = [
     { categoria: "mulher", img: "http://extra.globo.com/incoming/14942281-f88-b8b/w448/Elisabeth-Reyes-mulher-Sergio-Sanchez.jpg" },
    { categoria: "mulher", img: "http://extra.globo.com/incoming/14942281-f88-b8b/w448/Elisabeth-Reyes-mulher-Sergio-Sanchez.jpg" },
    { categoria: "homem", img: "http://dicasmodafeminina.com/wp-content/uploads/2012/08/qualidades-de-homem-ideal-autoconfianca.jpg" },
    { categoria: "homem", 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';
  
});

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

Carlos Alexandrino

Curtir t�pico + 0

Responder