AngularJS 使用图像/图标作为过滤器选项

标签 angularjs html css

我必须通过点击图标来过滤图库，即男性图标应该只过滤男性图像(如上面的下拉列表那样)，对女性也是如此。

所以下拉列表显示了我试图用图标做什么，但图标本身不起作用......我错过了什么？非常感谢您的帮助!!

var galleryApp = angular.module('galleryApp', []);

galleryApp.controller('galleryController', function galleryController($scope) {
	$scope.images = [
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
	"altText" 	: "Person 1",
	"type"		: "female, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
	"altText" 	: "Person 2",
	"type"		: "malex, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
	"altText" 	: "Person 3",
	"type"		: "malex, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
	"altText" 	: "Person 4",
	"type"		: "malex, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
	"altText" 	: "Person 5",
	"type"		: "female, all" 
	}
];

});
body { margin: 0; background: #333; }
#mainGallery { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
#mainGallery .imgBlock { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}

#mainGallery .imgBlock img { 
  width: 100%; 
  height: auto;
}
#seperator {
	width: 100%;
	height: 1px;
	display: block;
}
.search {
	background: #222;
	border: 1px solid black;
	width: 500px;	
	padding: 10px 0;
	margin: .5vw auto .5vw auto;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.dropdown {
	margin-left: 15px;
}
.filterImageWrapper {
	position: relative;
	width: 470px;
	overflow: hidden;	
	margin: 15px;
}
.filterImage {
	width: 470px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;	
	-webkit-transform: translateX(0);
	transform:translateX(0);
	-webkit-transition: all 1s;
	transition: all 1s;
}
#overlayFilter {
	opacity:0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 470px;	
	-webkit-transition:all 1s;
	transition:all 1s;
}
#overlayFilter.overlayOpacity {
	opacity: 1;	
}
#filterBar {
	width: 100%;
	height: 60px;
	background: #666;	
	margin: .5vw;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: 1px solid black;
}
.selectedFarbig {
	-webkit-transform: scale(4,4) translate(-40px, 50px);
	transform: scale(4,4) translate(-40px, 50px);
}
.galleryItems {
	-webkit-filter: grayscale(.9) sepia(.3);
	filter: grayscale(.9) sepia(.3);
	-moz-border-radius: 4px;	
	-webkit-border-radius: 4px;
	border-radius: 4px;
	webkit-transition: all .4s;
	transition: all .4s;
}
.galleryItems:hover {
	-webkit-filter: grayscale(.1) sepia(.8);	
}
#filterBar input:first-child {
	height: 50px;	
}
#filterBar input:nth-child(2) {
	height: 50px;	
}

@media screen and (max-width: 400px) {
  #mainGallery .imgBlock { margin: 0; }
  #mainGallery { padding: 0; }
  
}
<!doctype html>
<html ng-app="galleryApp">
<head>
<meta charset="UTF-8">
<title>Filter Gallery</title>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="controllers.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div ng-controller = "galleryController" id="mainGallery">

	<div class="search">
    	        
        <label class="dropdown">
        	<select id="selection" ng-model="query">
            	<option value="all">All</option>
            	<option value="malex">Male</option>
            	<option value="female">Female</option>
            </select>
        </label>
        
    
    <div id="filterBar">
    	<input ng-model="query" type="image" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" value="malex">   
        <input ng-model="query" type="image" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" value="female">     
    </div>	
    <div id="seperator"></div>
	
    <div class="imgBlock" ng-repeat="item in images | filter: query | orderBy: order">
        <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
            <img class="galleryItems" src="{{item.source}}" alt="{{item.altText}}" title="{{item.altText}}">
          
        </div>
        
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

最佳答案

type="image"的 input 是 graphical submit button ，它没有有意义的 value 属性，所以它可能真的不起作用。尝试简单地用类似的东西替换你的输入

<img class="imgButton" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" ng-click="query = 'malex'" />
<img class="imgButton" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" ng-click="query = 'female'" />

查看更新后的代码:

var galleryApp = angular.module('galleryApp', []);

galleryApp.controller('galleryController', function galleryController($scope) {
	$scope.images = [
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg",
	"altText" 	: "Person 1",
	"type"		: "female, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg",
	"altText" 	: "Person 2",
	"type"		: "malex, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg",
	"altText" 	: "Person 3",
	"type"		: "malex, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg",
	"altText" 	: "Person 4",
	"type"		: "malex, all" 
	},
	{
	"source" 	: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg",
	"altText" 	: "Person 5",
	"type"		: "female, all" 
	}
];

});
body { margin: 0; background: #333; }
#mainGallery { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
#mainGallery .imgBlock { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}

#mainGallery .imgBlock img { 
  width: 100%; 
  height: auto;
}
#seperator {
	width: 100%;
	height: 1px;
	display: block;
}
.search {
	background: #222;
	border: 1px solid black;
	width: 500px;	
	padding: 10px 0;
	margin: .5vw auto .5vw auto;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.dropdown {
	margin-left: 15px;
}
.filterImageWrapper {
	position: relative;
	width: 470px;
	overflow: hidden;	
	margin: 15px;
}
.filterImage {
	width: 470px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;	
	-webkit-transform: translateX(0);
	transform:translateX(0);
	-webkit-transition: all 1s;
	transition: all 1s;
}
#overlayFilter {
	opacity:0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 470px;	
	-webkit-transition:all 1s;
	transition:all 1s;
}
#overlayFilter.overlayOpacity {
	opacity: 1;	
}
#filterBar {
	width: 100%;
	height: 60px;
	background: #666;	
	margin: .5vw;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: 1px solid black;
}
.selectedFarbig {
	-webkit-transform: scale(4,4) translate(-40px, 50px);
	transform: scale(4,4) translate(-40px, 50px);
}
.galleryItems {
	-webkit-filter: grayscale(.9) sepia(.3);
	filter: grayscale(.9) sepia(.3);
	-moz-border-radius: 4px;	
	-webkit-border-radius: 4px;
	border-radius: 4px;
	webkit-transition: all .4s;
	transition: all .4s;
}
.galleryItems:hover {
	-webkit-filter: grayscale(.1) sepia(.8);	
}
#filterBar input:first-child {
	height: 50px;	
}
#filterBar input:nth-child(2) {
	height: 50px;	
}
.imgButton {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

@media screen and (max-width: 400px) {
  #mainGallery .imgBlock { margin: 0; }
  #mainGallery { padding: 0; }
  
}
<!doctype html>
<html ng-app="galleryApp">
<head>
<meta charset="UTF-8">
<title>Filter Gallery</title>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="controllers.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div ng-controller = "galleryController" id="mainGallery">

	<div class="search">
    	        
        <label class="dropdown">
        	<select id="selection" ng-model="query">
            	<option value="all">All</option>
            	<option value="malex">Male</option>
            	<option value="female">Female</option>
            </select>
        </label>
        
    
    <div id="filterBar">
<img class="imgButton" src="http://findicons.com/files/icons/438/dating/256/male.png" name="malex" ng-click="query = 'malex'" />
<img class="imgButton" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/sex-female-512.png" name="female" ng-click="query = 'female'" />   
    </div>	
    <div id="seperator"></div>
	
    <div class="imgBlock" ng-repeat="item in images | filter: query | orderBy: order">
        <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
            <img class="galleryItems" src="{{item.source}}" alt="{{item.altText}}" title="{{item.altText}}">
          
        </div>
        
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

关于AngularJS 使用图像/图标作为过滤器选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33763359/

上一篇：html - 固定页面滚动

下一篇：jquery - Kendo UI - 并排显示图表

相关文章：

javascript - 当我调用它时，angular 的 $rootScope.$on() 方法没有被触发。为什么？

php - 基于可变深度数据生成嵌套 UL

javascript - 如何在单个页面中使用 php 使 while 循环产生多个阅读更多按钮？

javascript - flex 元素是否有可能与它们上方的元素紧密对齐？

javascript - 如何隐藏所有内容，直到用户搜索此表中的特定元素？

CSS 边框汇合点

javascript - 如何将姓名拆分为名字和姓氏并在范围内使用

javascript - Alasql 未定义

javascript - 在AngularJS中，如何确定组件是否提供了属性？

html - 在创建特定的固定 CSS 网格布局方面寻求帮助

©2024 IT工具网  联系我们