Filter images by category with Checkbox AngularJS

Question

Filter images by category with Checkbox AngularJS

Navigation

#1 by (2 votes)
#2 by (-1 votes)

1

I need% MEN and WOMEN . In the filter list, appear 4 items, and it should appear only 2 (man and woman) , that is, by category.

Another problem is that the filter is by filtrar and that brings me only 1 image per check , I need to have ng-show="picture.checked" , ie when I click on woman, because there are two images of women with the same category and the same goes for the man.

What I already have:

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><htmlng-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>

angularjs imagem

asked by anonymous 10.03.2016 / 16:59

2 answers

-1

Try this:

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

Tip: You can leave the optional "results" section to reuse the results, plus filter:item.checked is what you are looking for.

11.03.2016 / 02:24

Put words in capital letters Filter results on a bank level Entity Framework

score 2 · Accepted Answer

Hello, I have refiled your code by adding a lib and creating a filter to solve both problems.

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>