I'm learning AngularJS by working through this on YouTube tutorial and I've hit a block on the 14th video with the ng-submit directive.
See code snipit below, when you fill in the form at the bottom and click submit it's supposed to add a new Ninja, but it's not working. There are no errors showing in the console. I placed a debugger breakpoint within the addNinja() function definition and it doesn't go into it when I click submit.
Any idea what I'm doing wrong?
var myNinjaApp = angular.module('myNinjaApp',[]);
myNinjaApp.controller('NinjaController', ['$scope',function($scope){
$scope.removeNinja = function(ninja){
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
};
$scope.addNinja = function(){
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
};
// $scope.addNinja = function() {
// $scope.ninjas.push(this.newninja);
// $scope.newninja = '';
// };
$scope.ninjas = [
{
name: "Yoshi",
belt: "green",
rate: 50,
available: true
},
{
name: "Crystal",
belt: "yellow",
rate: 30,
available: true
},
{
name: "Ryu",
belt: "orange",
rate: 10,
available: false
},
{
name: "Shaun",
belt: "black",
rate: 1000,
available: true
}
];
}]);
body{
font-family: Helvetica;
margin: 0;
}
h1,h2,h3{
margin: 0;
}
.belt{
padding: 5px 10px;
border-radius: 10px;
margin-left: 5px;
color: #fff;
font-size: 15px;
text-transform: uppercase;
}
#menu-bar{
background: crimson;
color: #fff;
padding: 10px;
}
#menu-bar h1{
font-size: 24px;
font-weight: normal;
display: inline-block;
}
#menu-bar ul{
float: right;
list-style-type: none;
padding: 0;
margin: 6px 0;
}
#menu-bar li{
float: right;
margin-left: 20px;
}
#menu-bar a{
color: #fff
}
main{
background: #eee;
width: 80%;
margin: 30px auto;
border-radius: 10px;
}
.content{
padding: 20px;
}
.content button,
.content input[type="submit"]{
background: #fff;
padding: 10px;
border-radius: 10px;
cursor: pointer;
color: #777;
border: 0;
box-shadow: 2px 2px 2px rgba(20,20,20,0.1);
font-size: 16px;
}
.content button:nth-child(2){
float: right;
}
.content ul{
padding: 0;
list-style-type: none;
margin: 30px 0;
}
.content li{
padding: 15px 0;
border-top: 1px solid #e2e2e2;
color: #444;
}
.content li span{
float: right;
}
.content li h3{
display: inline-block;
font-weight: normal;
font-size: 22px;
}
.content input{
width: 90%;
padding: 10px 5%;
border-radius: 10px;
border: 2px solid #ddd;
margin: 10px 0;
}
.content input[type="submit"]:last-child{
width: 150px;
display: block;
margin: 15px auto;
}
.remove{
float: right;
padding: 5px;
background: #fff;
width: 18px;
text-align: center;
border-radius: 20px;
color: crimson;
cursor: pointer;
margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
<head>
<title>TheNetNinja Angular Playlist</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div class="content">
<div ng-controller="NinjaController">
<button ng-click="order = 'name'">Order by Name</button>
<button ng-click="order = 'belt'">Order by Belt</button>
<input type="text" ng-model="search" placeholder="Search for a ninja">
<ul>
<li ng-repeat="ninja in ninjas | orderBy: order | filter: search" ng-show="ninja.available">
<h3>{{ninja.name}} - {{ninja.rate | currency: '£'}}</h3>
<div class="remove" ng-click="removeNinja(ninja)">x</div>
<span class="belt" style="background: {{ninja.belt}}">{{ninja.belt}} belt</span>
</li>
</ul>
</div>
<form ng-submit="addNinja()">
<input type="text" placeholder="name" ng-model="newninja.name" />
<input type="text" placeholder="belt" ng-model="newninja.belt" />
<input type="text" placeholder="rate" ng-model="newninja.rate" />
<input type="submit" value="Add new ninja">
</form>
<p>{{newninja}}</p>
</div>
</body>
</html>
You have a div in the wrong place - move </div> above <form ng-submit="addNinja()"> to after <p>{{newninja}}</p>
bascially the ng-submit is not within the ninjacontroller div
see - https://plnkr.co/edit/pPucxMw0Yjr9OZoxl0vy?p=preview for a working version
myNinjaApp.controller('NinjaController', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$http({
url: "data/ninjas.json",
method: "GET"
}).then(function (resp) {
//$log.log(resp.data);
$scope.ninjas = resp;
}, function (resp) {
$log.error("ERROR Occurred");
//debugger;
});
$scope.removeNinja = function (ninja) {
var removeNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removeNinja, 1);
}
$scope.addNinja = function () {
$scope.ninjas.push({
name: $scope.newninja.name,
belt: $scope.newninja.belt,
rate: parseInt($scope.newninja.rate),
available: true
});
$scope.newninja.name = "";
$scope.newninja.belt = "";
$scope.newninja.rate = "";
};
$scope.removeAll = function () {
$scope.ninjas = [];
};
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
}]);
Related
Colleagues, there is such an example for clarity.
[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
s.addEventListener('click', function() {
[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
arr[i].classList.remove('li-example-active');
})
arr[i].classList.add('li-example-active');
})
})
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 20px;
letter-spacing: 3px;
}
li.li-example-active{
background-color: #00c;
}
<menu class="example">
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
<li class="li-example"><span>Example</span></li>
</menu>
I do not think that it is necessary to explain what is happening in the example above.
And an example on AngularJS
const app = angular.module('app', []);
app.directive('example', function() {
return {
restrict: "C",
link: function(scope, element, attrs) {
scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
}
}
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example-active {
background-color: #00c;
}
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-repeat="example in myExample"
ng-click="active = !active"
ng-class="active ? '' : 'li-example-active'">
<span>{{example}}</span>
</li>
</menu>
<html>
And how in this variant to implement this example as in the first classical variant JS ???? So that the element that was clicked was assigned the class li-example-active, and the rest was removed the classli-example-active ???
Create an array and a function to manipulate that array.
Use them in the HTML
<menu class="example">
<li class="li-example" ng-repeat="example in myExample"
ng-click="makeActive($index)"
ng-class="{'li-example-active': activeArr[$index]}">
<span>{{example}}</span>
</li>
</menu>
Implement them in a controller:
app.controller('example', function($scope) {
$scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
$scope.activeArr = $scope.myExample.map(_ => false);
$scope.makeActive=function(index) {
Object.keys($scope.activeArr).forEach( _ => {
$scope.activeArr[_] = (_ == index);
});
};
});
The DEMO
const app = angular.module('app', []);
app.controller('example', function($scope) {
$scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
$scope.activeArr = $scope.myExample.map(_ => false);
$scope.makeActive=function(index) {
Object.keys($scope.activeArr).forEach( _ => {
$scope.activeArr[_] = (_ == index);
});
};
});
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: #222;
}
li {
list-style-type: none;
}
menu {
display: flex;
background-color: #999;
margin: 15px;
}
li.li-example {
text-align: center;
cursor: pointer;
max-width: 200px;
margin: 5px;
padding: 5px;
background-color: #cc0;
color: white;
font-size: 2.5vmax;
letter-spacing: 3px;
}
li.li-example-active {
background-color: #00c;
}
<html ng-app="app" ng-controller="example">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
<li class="li-example" ng-repeat="example in myExample"
ng-click="makeActive($index)"
ng-class="{'li-example-active': activeArr[$index]}">
<span>{{example}}</span>
</li>
</menu>
<html>
I use this directiv : http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
I have problem to with moving cards, when i move cards higher is ok, if the cards give less the problem starts.
i did this feature :
if ($scope.movingItem.indeksList == index) {
console.log('qrwa')
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
$scope.lists[index].cards = external[index].cards;
} else {
console.log('qrwa2')
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
$scope.lists[index].cards = external[index].cards;
}
If I do the movement in the same list and i move card higher is ok then must be perform:
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard +1, 1);
When from up to down must be perform :
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
And here is problem I cant get $index on which place I drop card to make If that I move card lower make this perform, If higer make this perform...
Here is whole project:
https://plnkr.co/edit/BVF0KxPrWiCeGDXVpQDV?p=preview
This code works:
$scope.dropCallback = function (index, item, external) {
$scope.lists[$scope.movingItem.indeksList].cards.splice($scope.movingItem.IndexCard, 1);
$scope.lists[index].cards = external[index].cards;
console.log($scope.lists[index].cards)
return item;
};
The watcher is not neccesary in this case, because you are getting informed of changes by the dropCallback function itself.
Your job is simply to remove the item at the index, like you did. Regardless of the moving direction.
EDIT
Here is the working plunker
Not sure why you need to use dropCallback just to move items around in the list. You can use dnd-moved="item.cards.splice($index, 1)" as shown in the demo.
Check out update version of your code:
angular.module("app", ["dndLists"]).controller("c1", function($scope){
$scope.title ="drag and drop";
$scope.lists = [
{
id: 2,
name: "list2",
cards: [
{ name: "card1"},
{ name: "card2"},
{ name: "card3"},
{ name: "card4"},
{ name: "card5"}
]
},
{
id: 3,
name: "list3",
cards: [
{ name: "card1"},
{ name: "card2"},
{ name: "card3"},
{ name: "card4"},
{ name: "card5"}
]
}
];
$scope.logEvent = function (indeksList, IndexCard) {
$scope.movingItem = {
indeksList: indeksList,
IndexCard: IndexCard
}
};
$scope.dropCallback = function (index, item, external) {
return item;
};
})
/* Styles go here */
.tilt {
transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
/* <BEGIN> For OS X */
*:focus {
outline: none;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* <END> For OS X */
body {
font-family: 'Open Sans', sans-serif;
background-color: #0375AB;
}
#wrapper, #topbar-inner {
width: 95%;
margin: 0 auto;
}
#topbar {
background-color: #036492;
}
#topbar-inner {
height: 42px;
position: relative;
}
#topbar #nav {
float: left;
width: 25%;
background: yellow;
}
#topbar #logo {
width: 100%;
padding-top: 8px;
text-align: center;
}
#topbar #login {
position: absolute;
right: 0px;
bottom: 10px;
}
#topbar #logo h1 {
margin: 0;
display: inline;
font-size: 24px;
font-family: "Ubuntu", sans-serif;
color: rgba(255, 255, 255, 0.3);
}
#topbar #logo h1:hover {
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
#wrapper {
margin-top: 30px;
}
#tasks {
width: 260px;
padding: 7px;
background-color: #E2E4E6;
border-radius: 3px;
}
#tasks h3 {
padding: 0;
margin: 0px 0px 5px 0px;
font-weight: 400;
font-size: 14px;
}
#tasks ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#tasks li {
padding: 5px 8px;
margin-bottom: 4px;
background-color: #fff;
border-bottom: 1px #CCCCCC solid;
border-radius: 3px;
font-weight: 300;
}
#tasks li i {
float: right;
margin-top: 5px;
}
#tasks li i:hover {
cursor: pointer;
}
#tasks li i.fa-trash-o {
color: #888;
font-size: 14px;
}
#tasks input[type=text] {
margin: 0;
width: 244px;
padding: 5px 8px;
border-width: 0;
border-radius: 3px;
box-shadow: none;
}
.btn-login {
color: #fff;
background-color: #448DAF;
text-decoration: none;
border-radius: 3px;
padding: 5px 10px;
}
<script data-require="angular.js#1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script data-require="angular-drag-and-drop-lists#1.2.0" data-semver="1.2.0" src="https://marceljuenemann.github.io/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<body ng-app="app">
<div ng-controller="c1">
<ul style="list-style-type: none;">
<li ng-repeat="item in lists">
<div style="float: left; margin-left: 5px;">
<div id="tasks">
{{item.name}}
<ul dnd-list="item.cards" dnd-drop="dropCallback($index, item, lists)">
<li ng-repeat="card in item.cards"
dnd-draggable="card"
dnd-dragstart="logEvent($parent.$index, $index)"
dnd-moved="item.cards.splice($index, 1)"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
dnd-effect-allowed="move">
{{card.name}}
</li>
</ul>
<form ng-submit="addTask(item._id, newTask, $index)">
<input type="text" ng-model="newTask" placeholder="add a new task" required />
</form>
</div>
</div>
</li>
</ul>
</div>
</body>
You can find Plunker project here.
I am having problems with the selected date because it's not getting the current date initially, how can I fix it?
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.name = 'World';
$scope.event = {};
$scope.day = moment();
$scope.selected = removeTime($scope.selected || moment());
$scope.month = $scope.selected.clone();
var start = $scope.selected.clone();
start.date(-6);
removeTime(start.day(0));
buildMonth($scope, start, $scope.month);
$scope.select = function(day) {
$scope.selected = day.date;
};
$scope.next = function() {
var next = $scope.month.clone();
removeTime(next.month(next.month()+1).date(0));
$scope.month.month($scope.month.month()+1);
buildMonth($scope, next, $scope.month);
};
$scope.previous = function() {
var previous = $scope.month.clone();
removeTime(previous.month(previous.month()-1).date(0));
$scope.month.month($scope.month.month()-1);
buildMonth($scope, previous, $scope.month);
};
function removeTime(date) {
return date.day(1).hour(0).minute(0).second(0).millisecond(0);
}
function buildMonth($scope, start, month) {
$scope.weeks = [];
var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
while (!done) {
$scope.weeks.push({ days: buildWeek(date.clone(), month) });
date.add(1, "w");
done = count++ > 2 && monthIndex !== date.month();
monthIndex = date.month();
}
}
function buildWeek(date, month) {
var days = [];
for (var i = 0; i < 7; i++) {
days.push({
name: date.format("dd").substring(0, 1),
number: date.date(),
isCurrentMonth: date.month() === month.month(),
isToday: date.isSame(new Date(), "day"),
date: date
});
date = date.clone();
date.add(1, "d");
}
return days;
}
});
.border-box {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.calendar {
float: left;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: white;
width: 300px;
border: solid 1px #CCC;
margin-bottom: 10px;
}
.calendar > div.header {
float: left;
width: 100%;
background: #2875C7;
height: 40px;
color: white;
}
.calendar > div.header > * {
height: 40px;
line-height: 40px !important;
display: inline-block;
vertical-align: middle;
}
.calendar > div.header > i {
float: left;
width: 40px;
font-size: 1.125em;
font-weight: bold;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 10px;
cursor: pointer;
}
.calendar > div.header > i.fa-angle-left {
text-align: left;
}
.calendar > div.header > i.fa-angle-right {
text-align: right;
margin-left: -40px;
}
.calendar > div.header > span {
float: left;
width: 100%;
font-weight: bold;
text-transform: uppercase;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-left: 50px;
margin-left: -40px;
text-align: center;
padding-right: 40px;
color: inherit;
}
.calendar > div.week {
float: left;
width: 100%;
border-top: solid 1px #CCC;
}
.calendar > div.week:first-child {
border-top: none;
}
.calendar > div.week > span.day {
float: left;
width: 14.28571429%;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-left: solid 1px #CCC;
font-size: 0.75em;
text-align: center;
height: 30px;
line-height: 30px !important;
display: inline-block;
vertical-align: middle;
background: white;
cursor: pointer;
color: black;
}
.calendar > div.week > span.day:first-child {
border-left: none;
}
.calendar > div.week > span.day.today {
background: #E3F2FF;
}
.calendar > div.week > span.day.different-month {
color: #C0C0C0;
}
.calendar > div.week > span.day.selected {
background: #2875C7;
color: white;
}
.calendar > div.week.names > span {
color: #2875C7;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" href="style.css" title="" type="" />
</head>
<body ng-controller="MyCtrl">
<div class="calendar">
<div class="week-days">
<span class="day">Mon</span>
<span class="day">Tue</span>
<span class="day">Wed</span>
<span class="day">Thu</span>
<span class="day">Fri</span>
<span class="day">Sat</span>
<span class="day">Sun</span>
</div>
<div class="week" ng-repeat="week in weeks">
<span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
</div>
</div>
</body>
</html>
This is my link file with my code: https://plnkr.co/edit/jag8GKsfcRvLshfm0oac?p=preview
The problem is you are setting the day of the week to monday with the call date.day(1) in the function removeTime.
Fixed be removing this:
function removeTime(date) {
return date.hour(0).minute(0).second(0).millisecond(0);
}
See updated plunker
Sorry for the vague title, but I couldn't find a fitting short description.
So, I have a list of different items which I'm using ng-repeat to show. Some of them might be removed or added to that list.
I'm using ng-enter etc to animate the transition of the items entering and exiting the view. The problem is, the rest of the items, the ones that are not being added or removed, look like they hop and skip around instead of flowing naturally when items between them are being removed or added.
I made a codepen:
If you click any of the players, you remove them. Click reset to bring them back in. If you remove any of the players in the middle, you can see they jump to the left instantly after the removed item is done with its animation. I would like it to slide over to it's new position instead.
http://codepen.io/utrolig/pen/oxQVVZ
HTML:
<div ng-app="test">
<div ng-controller="AnimateController as vm">
<div class="player" ng-repeat="player in vm.items" ng-click="vm.toggleActiveState(player)" ng-if="player.active">
<div class="imgcont">
<img ng-src="{{player.img}}" />
<div class="jerseyno">
<span>#{{::player.jerseyNumber}}</span>
</div>
</div>
<div class="playername">
<span ng-bind="::player.name"></span>
</div>
</div>
<div class="resetbutton" ng-click="vm.resetActiveState(vm.players)">
<span>Reset</span>
</div>
</div>
</div>
JS:
(function(){
'use strict';
angular
.module('test', ['ngAnimate'])
.controller('AnimateController', AnimateController);
function AnimateController(){
var vm = this;
vm.toggleActiveState = toggleActiveState;
vm.resetActiveState = resetActiveState;
vm.items = [
{
name: "Pavel Bure",
active: true,
team: "Vancouver Canucks",
jerseyNumber: 10,
img: "https://nhl.bamcontent.com/images/headshots/current/168x168/8455738.jpg"
},{
name: "Wayne Gretzky",
jerseyNumber: 99,
active: true,
team: "Vancouver Canucks",
img: "https://nhl.bamcontent.com/images/headshots/current/168x168/8447400.jpg"
},{
name: "Jaromir Jagr",
jerseyNumber: 68,
active: true,
team: "Florida Panthers",
img: "https://nhl.bamcontent.com/images/headshots/current/168x168/8448208.jpg"
},{
name: "Mats Zuccarello",
jerseyNumber: 36,
active: true,
team: "New York Rangers",
img:"https://nhl.bamcontent.com/images/headshots/current/168x168/8475692.jpg"
}
];
//////////////
function toggleActiveState(item){
item.active = item.active ? false : true;
}
function resetActiveState(arr){
for (var i = 0; i < vm.items.length; i++){
vm.items[i].active = true;
}
}
}
})();
CSS:
body, html {
min-height: 100vh;
position: relative;
font-family: 'Arial', sans-serif;
background: #1d1f20;
color: rgba(255,255,255,0.7)
}
.imgcont {
border-radius: 8px;
}
.imgcont img {
border-radius: 8px;
}
.jerseyno {
position: absolute;
top: 6px;
right: 6px;
padding: 4px;
background: rgba(0,0,0,.75);
border-radius: 4px;
}
.resetbutton {
display: block;
float: left;
border-radius: 4px;
margin: 24px;
padding: 24px;
background: rgba(0,0,0,.5);
cursor: pointer;
}
.playername {
position: absolute;
bottom: 6px;
left: 6px;
background: rgba(0,0,0,.75);
padding: 4px;
border-radius: 4px;
}
.player {
float: left;
margin-right: 12px;
position: relative;
cursor: hand;
cursor: pointer;
transition: .5s all;
}
.player.ng-enter {
opacity: 0;
transform: translateY(-50%);
}
.player.ng-enter-active {
opacity: 1;
transform: translateY(0%);
}
.player.ng-leave-active {
opacity: 0;
transform: translateY(-50%);
}
Thanks!
I have to filter a gallery by clicking on icons, i.e. the male icon should filter only male images (as the dropdown above does) and the same for the females.
so the dropdown shows what i'm trying to do with the icons, but the icons themselves don't work... what am I missing? Thanks a lot for your help!!
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>
The input with type="image" is a graphical submit button, it doesn't have a meaningful value attribute, so that's probably it doesn't really work. Try to simply replace your inputs with something like
<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'" />
See updated code:
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>