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;
};
});
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>