1

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>

1
  • 1
    Alguém para ajudar?
    – Lollipop
    Commented 10/03/2016 às 16:24

2 Respostas 2

2

Olá, refiz seu código adicionando uma lib e criando um filtro para resolver os dois problemas.

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

.controller('MainCtrl', function($scope) {
  $scope.filtro = [];
  $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" }
  ];

  //função utilizada no filter do ng-repeat
  $scope.devListFilter = function () {
    return $scope.devList.filter(function (item) {
      return $scope.filtro.indexOf(item.categoria) !== -1;
    });
  };
  $scope.pushNotificationChange = function() {
    console.log('Push Notification Change', $scope.pushNotification.checked);
  };
  
  $scope.pushNotification = { checked: true };
  $scope.emailNotification = 'Subscribed';
  
});
<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="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

	<!-- angular-filter.js utilizado para groupBy do checkbox -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.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, value) in devList | groupBy:'categoria' track by $index"
					  ng-model="filtro[$index]" ng-true-value="{{key}}" ng-false-value="" 
					  ng-checked="check">
		  {{ key }}
	  </ion-checkbox>
	  </div>

		<!-- ng-repeat utilizando uma função -->
	  <div class="imgs" ng-repeat="picture in devListFilter(devList)">
			<img width="200" ng-src="{{picture.img}}" width="100%" ng-click="showImage($index)"/>
	  </div>
	  
	</ion-content>
	<script src="app.js"></script>

  </body>
</html>

2
  • Sabe fazer com que esses check fiquem true e as imagens surjam na tela logo de cara para o usuário?
    – Lollipop
    Commented 11/03/2016 às 13:29
  • javascript: $scope.filtro = []; -> $scope.filtro = ["homem","mulher"]; html: ng-checked="checked" -> ng-checked="true" Commented 11/03/2016 às 16:26
-1

Tente usar isso:

ng-repeat="picture in devList | filter:item.checked as results"

Dica: você pode deixar o trecho "as results" opcional para reutilizar os resultados, mais o filter:item.checked é o que você esta querendo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .