Filtrar imagens por categoria com Checkbox AngularJS
18/03/2016
0
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:
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
Clique aqui para fazer login e interagir na Comunidade :)