通过单击按钮过滤图像 AngularJS
Filtering Images with Button Clicks AngularJS
我需要根据模型中的类别过滤图像。我已经为该类别创建了按钮。例如。如果用户按下 Lake Pics 按钮,希望它过滤模型中类别为 'lake' 的所有图像,或者如果选择了 Family Pics,则过滤类别为 'family' 的所有图像等。所有的我发现和研究过的示例在 HTML 中有静态图像链接。但我想从模型中得出一切。处理此程序化的最佳方法是什么?
<!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;
};
});
您的代码中几乎没有错误,
(i) 使用 ng-click 而不是点击 angularjs
(ii)将 ng-repeat 放在外面,以便反映过滤器的变化
(iii) 使用 Angularjs 过滤器而不是构建自己的
演示
"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>
我需要根据模型中的类别过滤图像。我已经为该类别创建了按钮。例如。如果用户按下 Lake Pics 按钮,希望它过滤模型中类别为 'lake' 的所有图像,或者如果选择了 Family Pics,则过滤类别为 'family' 的所有图像等。所有的我发现和研究过的示例在 HTML 中有静态图像链接。但我想从模型中得出一切。处理此程序化的最佳方法是什么?
<!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;
};
});
您的代码中几乎没有错误,
(i) 使用 ng-click 而不是点击 angularjs
(ii)将 ng-repeat 放在外面,以便反映过滤器的变化
(iii) 使用 Angularjs 过滤器而不是构建自己的
演示
"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>