As you can see from this plunker
I have a simple project viewer.
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="ProjectsController">
<h1>Hello Plunker!</h1>
<p>{{ name }}</p>
<div class="slider">
<div class="project" ng-repeat="project in projects">
<projects-info info="project"></projects-info>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Angular:
var app = angular.module("app", ['ngAnimate']);
app.controller('ProjectsController', ['$scope', function($scope) {
$scope.name = 'hello world';
$scope.projects = [
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 1'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 2'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 3'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 4'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 5'
}];
$scope.numOfProjects = 8;
}]);
app.directive('projectsInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'projectsInfo.html',
};
});
My objective is to make the projects animate (more specifically, grow in size) when I hover over them. I've tried adding jquery to the html in a script tag but that didn't do anything. I've seen people use the 'link:' in their directive but I haven't seen a clear example where I can implement it to mine. My challenge is that I want to do this through angular, not css.
I really appreciate the help!
No need to touch your js, do it in your css like this:
.project {
transition: 0.2s;
}
.project:hover {
transform: scale(1.2,1.2);
}
Here's the demo
Ok, because you really want to do it with angularjs Which I don't really recommend just to execute for this requirement and just for the sake of demonstration and 'educational' purposes you may do it like this demo
using ng-mouseover, ng-mouseleave and ng-class
<div ng-mouseover='project.isHovered = true' ng-mouseleave='project.isHovered = false' ng-class='{hovered: project.isHovered}' class="project" ng-repeat="project in projects">
<projects-info info="project"></projects-info>
</div>
then in your css:
.project {
transition: 0.2s;
}
.project.isHovered {
transform: scale(1.2,1.2);
}
Related
It seems there is an injection error in my directive but I don't understand whats wrong in my code and other posts in that issue didn't really help me figure that out. Anyone has an idea? Happy about any suggestions! Thanks!!!
my index.html
<!DOCTYPE html>
<html>
<head>
<title>Flash Cards</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/navbar/navbar.js"></script>
<script src="js/home/home.js"></script>
<script src="js/about/about.js"></script>
</head>
<body ng-app="flashCards" >
<navbar></navbar>
hello
</body>
</html>
my directive:
app.directive('navbar', function ($rootScope, $state) {
return {
restrict: 'E',
scope: {},
templateUrl: 'js/navbar/navbar.html',
link: function (scope) {
scope.items = [
{ label: 'Home', state: 'home' },
{ label: 'Unsere Praxis', state: 'about' },
// { label: 'Leistungen', state: 'docs' },
// { label: 'Sprechstunden', state: 'sprechstunden' },
// { label: 'Kontakt', state: 'kontakt' },
// { label: 'Termin buchen', state: 'book' }
];
}
};
});
navbar html
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<fullstack-logo></fullstack-logo>
</div>
<ul class="nav navbar-nav">
<li ng-repeat="item in items">
<a ui-sref-active="active" ui-sref="{{ item.state }}">{{ item.label }}</a>
</li>
</ul>
<button ng-show="!user" ui-sref="login" class="btn login-button">Login</button>
<div ng-show="user" class="welcome">
<span>Welcome, {{ user.email }}!</span>
<a >Logout</a>
</div>
</div>
</nav>
I guess it is hard to say for sure without trying it myself, but here is a possibility:
What is this $state you use in:
app.directive('navbar', function ($rootScope, $state) {
Is this the $state of ui router?
If so maybe you are missing a link to angular-ui-router.js, something like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
Also don't forget to make sure you added a dependency to your application module:
angular.module('app', ['ui.router']);
I hope someone can help me figure out my issue. I am trying to fill a comboBox with some array data but I am getting an empty comboBox as if nothing it returns back to be displayed, I know I am closed but can find what I am missing.
Thank you in advance
angular.module('demoApp', [])
.controller('simpleController', ['$scope', function($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}]);
<html ng-app="demoApp">
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
</html>
it seems your angularjs reference is wrong. please check the path. see below snippet with CDN.
<html ng-app="demoApp">
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('demoApp', [])
.controller('simpleController',['$scope', function ($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}
]
);
</script>
</html>
I would like this fade class div to show on the page with a slow fade-in effect when the ng-show requirement has been met. In jQuery I could do this in a jiffy but it's proving difficult in Angular due to lack of working examples. Here is the working code:
Here is the index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:30px">
<user-info-card></user-info-card>
</body>
</html>
Here is the script.js:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Luke Skywalker',
address: {
street: 'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends: [
'Han',
'Leia',
'Chewbacca'
],
rank: 'scout',
score: 27
}
});
angular.module('app').directive('userInfoCard', function() {
return {
templateUrl: "userInfoCard.html",
restrict: "E",
controller: function($scope) {
$scope.knightMe = function(user) {
if (user.score > 25) {
user.rank = 'miner';
}
}
}
}
})
Here is the template file userInfoCard.html loaded by the directive:
<div class="panel panel-primary">
<div class="panel-heading">{{user.name}}</div>
<div class="panel-body">
<div ng-show='!!user.address'>
<h4>Address:</h4>
{{user.address.street}} <br />
{{user.address.city}}<br />
{{user.address.planet}}
</div> <br />
<h4>Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div>
Rank: {{user.rank}}
</div><br>
<div ng-show="user.score >= 25" ng-class="ng-show" class="fade">
<span>Congratulations, you have the ranked up! Click the button below to claim your new rank now.</span><br />
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>
And last but not least, the style.css:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-show {
transition: 0.5s linear all;
opacity: 1;
}
So in a nutshell, when the user score is more than 25, which it is in this case, I would like that fade class div to load in a gentle fade-in fashion. It's loading now fine but I'm not sure how to add the effect. Thanks for your time.
In order to animate ngShow/Hide elements you first need to include ngAnimate module:
angular.module('app', ['ngAnimate']);
Then all you need just a few little CSS rules:
.fade {
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
transition: all .5s linear;
display: block !important;
}
Demo: http://plnkr.co/edit/qHcMEL2Da5Fome7nUenf?p=info
You can do it by the following step:
Step1: First add the library/package of angular-animate.js
Step2: Then include the library in the module angular.module('app', ['ngAnimate']);
Step3 You can manipulate the UI like angular.element(element).fadeIn(1000, doneFn);
Check the documentation for Reference :https://docs.angularjs.org/api/ngAnimate
you are missing angular.module('app', ['ngAnimate']); otherwise animations wont work.
You may also wantto add Angular Animate
here is my code.. where I made problem.. please help me out.. I am trying to create a controller what fill fetch data and show in html li part.. but I don't understand where is the error.. I have tried with adding jQuery min library and without it.. but failure.. kindly help me to short out this problem..
<html data-ng-app="myApp">
<head>
<title>First Angular application</title>
</head>
<body>
checkNames:
<input type="text" data-ng-model="namek">
<div class="container" data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.castomers = [{ name: 'krishnendu sarkar', city: 'kolkata' },
{ name: 'chanchal sarkar', city: 'bangalore' },
{ name: 'nilava chakraborty', city: 'pune' }]
};
</script>
</body>
</html>
thanks in advance..
You should create and angular module first with name myApp then you could have data-ng-controller="SimpleController" to be move it over body tag so that the namek input field included inside the SimpleController controller context.
Add ng-app="myApp" on the body tag. so that angular module gets initialize on page.
Markup
<body data-ng-controller="SimpleController">
checkNames:
<input type="text" data-ng-model="namek">
<div class="container">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
</div>
Controller
angular.module('myApp', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.castomers = [{
name: 'krishnendu sarkar',
city: 'kolkata'
}, {
name: 'chanchal sarkar',
city: 'bangalore'
}, {
name: 'nilava chakraborty',
city: 'pune'
}]
};
Demo PLunkr
please see this link here to see the whole code.
You should create angular module "myApp" which define the application then controller inside it.
Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>
In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>