Filter Images by Category with Angularjs Checkbox

Asked

Viewed 412 times

1

Precise filtrar MAN and FEMALE. In the filter list, 4 items appear, and should appear only 2(man and woman), that is to say, by category.

Another problem is that the filter is by ng-show="picture.checked" and that brings me only 1 image per check, I need you to come POR CATEGORIA, that is, when I click on woman appear two images, because there are two images of woman with the same category and the same goes for 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>
<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>

angularjs image
  • 1

    Someone to help?

2 answers

2


Hello, I redid 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>

  • Know how to make this check true and the images appear on the screen right away to the user?

  • javascript: $Scope.filter = []; -> $Scope.filter = ["man","woman"]; html: ng-checked="checked" -> ng-checked="true""

-1

Try to use this:

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

Tip: You can make the "Results" section optional to reuse the results, plus the filter:item.checked is what you’re looking for.

Browser other questions tagged angularjs image

You are not signed in. Login or sign up in order to post.