Filtering Images with Button Clicks AngularJS

Question

I'm needing to filter images based on category in the model. I've created buttons for the category. E.g. if user presses Lake Pics button, would like it to filter all of the images with the category 'lake' in the model or if Family Pics selected, filter all of the images with category 'family' etc. All of the examples I've found and researched have static image links within the HTML. But i would like to derive everything from the model. What would be the best way to approach this programatic?

<!DOCTYPE html>
    <html ng-app = "myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Picture Gallery</title>
        <link rel="stylesheet" type="text/css" 
href="bootstrap.min.css">
        <link rel ="stylesheet" type "text/css" href ="clicker.css">

   <script type = "text/javascript" src="Libs/angular.js"> </script>

        <script type = "text/javascript" src="js/gallery.js"></script>

        <div ng-controller = "MainController as vm">

     <div class = "container">
      <div class = "row">
        <div class = "col-md-12" id ="myBtnContainer">
        <button class = "btn active" onclick = 
           "filterSelection('all')"> Show all </button>
        <button class = "btn active" onclick = 
           "filterSelection('lake')"> Lake Pics </button>
        <button class = "btn active" onclick = 
           "filterSelection('family')"> Family Pics </button>
        <button class = "btn active" onclick = 
        "filterSelection('kids')"> Kid Pics </button>

      </div>
     </div>

      <div class = "row">
        <div class = "col-md-12">
         <div class = "thumbnail">
       </div>
      </div>

      <div ng-repeat = "image in vm.options.imageList">
      <img ng-src="{{image.images}}" hspace ="15" vspace ="10">


      </div>


          </div>
       </div>
    </div>
    </div>

    </body>
    </html>

JS

"use strict";


angular.module('myApp',[]);

angular.module('myApp').controller('MainController', function($scope) {
  var vm = this;


vm.selectCategory=selectCategory;

vm.options = {

   imageList:[

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'family'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'family',
  },


   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'family'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'lake'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'lake'
  }

],
};




function selectCategory(pos) {
  vm.selectedCategory = pos;

};





});

Sajeetharan · Accepted Answer · 2018-09-25 03:00:51Z

1

There are few mistakes in your code,

(i) Use ng-click instead of click with angularjs

(ii)Place the ng-repeat outside so that changes with filter gets reflected

(iii) Use Angularjs filter instead of building your own

DEMO

"use strict";


angular.module('myApp',[]);

angular.module('myApp').controller('MainController', function($scope) {
 var vm = this;
vm.selectCategory=selectCategory;

vm.options = {

   imageList:[

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'family'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'family',
  },


   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg',
    caption: 'cuddly',
    category: 'family'
  },

  {
    name:  'Blacky',
    images: 'images/blacky.jpeg',
    caption: 'cuddly',
    category: 'lake'
  },
  {
    name: 'Tabby',
    images: 'images/tabby.jpeg',
    caption: 'sleepy',
    category: 'lake'
  },

  {
    name:  'Cleo',
    images: 'images/Cleo.jpeg',
    caption:  'sleepy',
    category: 'lake'
  }

],
};


 

function selectCategory(pos) {
  vm.selectedCategory = pos;

};





});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
    <html ng-app = "myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Picture Gallery</title>
        <div ng-controller = "MainController as vm">
        <div class = "container">
        <div class = "row">
        <div class = "col-md-12" id ="myBtnContainer">
        <button class = "btn active" ng-click = 
           "vm.selectCategory('all')"> Show all </button>
        <button class = "btn active" ng-click = 
           "vm.selectCategory('lake')"> Lake Pics </button>
        <button class = "btn active" ng-click = 
           "vm.selectCategory('family')"> Family Pics </button>
        <button class = "btn active" ng-click = 
        "vm.selectCategory('kids')"> Kid Pics </button>
      </div>
      <div class = "row">
        <div class = "col-md-12">
         <div class = "thumbnail">
       </div>
      </div>
      <div ng-repeat = "image in vm.options.imageList | filter: { category: vm.selectedCategory }">
      <img ng-src="{{image.images}}" hspace ="15" vspace ="10">
    </div>
     </div>
     </div>
   </div>
    </body>
    </html>

edited Sep 25, 2018 at 3:00

answered Sep 25, 2018 at 1:32

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ginger22 Over a year ago

I included your function statement. So now can you please tell me what do i add to the button in the html? I tried several variations of <button class = "btn active" onclick = "selectCategory('lake')"> Lake Pics </button> But it says selectCategory() is undefined...?

Ginger22 Over a year ago

That is awesome! The only thing that doesn't work yet is the Select All. I changed it to "vm.selectCategory(' ')" but it clears all the pictures.

Collectives™ on Stack Overflow

Filtering Images with Button Clicks AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related