I want to show the details about a selected node in a side panel in my AngularJS application. How can I dynamically bind the selected Node with the data in the side panel?
I designed this to use with a pretty old Cytoscape.js version (2.0.2), but as far as I could check in the documentation, it stills the same. Below you can find a minimal example.
You could do something like this:
var cy = cytoscape({
container: document.getElementById('cy'),
showOverlay: true,
minZoom: 1,
maxZoom: 1,
layout: {
fit: true
},
elements: {
// nodes
"nodes": [{
"data": {
"id": "n1",
"name": "node 1",
"description": "Ars Gratia Artis 1"
}
}, {
"data": {
"id": "n2",
"name": "node 2",
"description": "Ars Gratia Artis 2"
}
}],
"edges": [{
"data": {
"source": "n1",
"id": "e1",
"target": "n2",
"type": "belongs-to"
}
}]
},
ready: function() {
var stringStylesheet = "node {"
+"content: data(name);"
+"text-valign: center;"
+"color: white;"
+"text-outline-width: 2;"
+"text-outline-color: #888;"
+"}"
+"edge {"
+" target-arrow-shape: triangle;"
+"content: data(type);"
+"text-outline-color: #FFF;"
+"text-outline-opacity: 1;"
+" text-outline-width: 2;"
+" text-valign: center;"
+" color: #777;"
+"width: 2px;"
+"}"
+":selected {"
+"background-color: black;"
+"line-color: black;"
+"target-arrow-color: black;"
+"source-arrow-color: black;"
+"color: black;"
+"}"
+".faded {"
+" opacity: 0.25;"
+"text-opacity: 0;"
+"}";
cy = this;
cy.style( stringStylesheet );
//You can have different panels for editing edges and nodes.
var nodeClicked = cy.on('tap', 'node', function(e) {
//var edgeClicked = cy.on('tap', 'edge', function(e) {
//Here I use pure jQuery to hide the edge-edition panel
//and show the node-edition one.
//$('div.edge-edition').hide();
$('div.node-edition').show();
//if you click in a specific node, unselect any other
//previously selected element from the graph
cy.elements().unselect();
//* identify which node was clicked
var node = e.target;
console.log("node clicked: " + node.data('name'));
//finally, fullfills forms of the panel with node data
$('.node-name').val(node.data('name'));
$('.node-description').val(node.data('description'));
});
}
});
html {
height: 98%;
}
body {
font-family: Verdana, Arial, Times New Roman;
font-size: 11px;
height: 100%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cy {
height: 85%;
width: 60%;
float: left;
position: relative;
top: 10px;
left: 0px;
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 0px;
display: block;
z-index: 1;
}
#edition {
float: right;
height: 85%;
width: 39.5%;
position: relative;
top: 10px;
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 0px;
display: block;
z-index: 1;
}
input,
textarea {
border: 1px solid #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
z-index: -1;
}
.node-name,
.node-description {
max-width: 350px;
width: 250px;
}
<script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div id="cy"></div>
<div id="edition">
<div class="node-edition">
<form>
<table>
<tr>
<td>Name</td>
<td>
<input type="text" class="node-name">
</td>
</tr>
<tr>
<td>Description</td>
<td>
<textarea class="node-description"></textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Like anything else, update your model appropriately such that the template renders the data you want. You could pass node.json() to a component, for example.
I am constructing form, and my markup is repeating all the time, so I tough I could make ng generate it for me.
Here is my partial
<div class="row fieldset">
<div class="column column-3">
<label for="{{params.fieldId}}">
{{params.labelText}}
</label>
</div>
<div class="column column-5">
<input type="text" ng-required="{{params.required}}" id="{{params.fieldId}}" name="{{params.fieldId}}" ng-model="params.ngModel" />
<small class="error" ng-show="????">{{params.validatioMessage}}</small>
</div>
<div class="column column-4" >
<div class="hint">
<p>{{params.hintTitle}}</p>
<p>{{params.hintText}}</p>
</div>
</div>
</div>
JSON object
$scope.paramz = {
fieldId: "firstname",
labelText: "First Name",
validatioMessage: "This field is required",
hintTitle: "First name",
hintText: "Please enter your first name",
ngModel: "form.firstName",
required: true
}
Directive:
<inputfield params="paramz"></inputfield>
My form consists of several steps, each in its own ng-formI need to validate each input field based on input state. As far as I am aware I can't just use dynamic variables in expressions what are my options, validation simply consists of $diry && $invalid
/*------------------------------*\
Grid System
\*------------------------------*/
.row,
.column {
box-sizing: border-box;
}
.row {
margin-bottom: 5px;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.column {
position: relative;
float: left;
display: block;
padding: 0 7px;
}
.column-1 {
width: calc(100% / 12 * 1);
}
.column-2 {
width: calc(100% / 12 * 2);
}
.column-3 {
width: calc(100% / 12 * 3);
}
.column-4 {
width: calc(100% / 12 * 4);
}
.column-5 {
width: calc(100% / 12 * 5);
}
.column-6 {
width: calc(100% / 12 * 6);
}
.column-7 {
width: calc(100% / 12 * 7);
}
.column-8 {
width: calc(100% / 12 * /);
}
.column-9 {
width: calc(100% / 12 * 9);
}
.column-10 {
width: calc(100% / 12 * 10);
}
.column-11 {
width: calc(100% / 12 * 11);
}
.column-12 {
width: 100%;
margin-left: 0;
}
#media only screen and (max-width: 550px) {
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
float: none;
width: auto;
}
.column + .column {
margin-left: 0;
}
}
section.ng-valid.ng-dirty h1.header:after {
content: "\f00c";
margin-left: 10px;
font-family: fontawesome;
}
body {
font-family: Arial;
}
.column input[type=radio] {
display: none;
}
input[type=text] {
border: 1px solid #569e48;
width: 100%;
font-size: 14px;
line-height: 1em;
padding: 0 7.5px;
min-height: 36px;
position: relative;
}
input.ng-invalid.ng-touched {
border: 1px solid #a90041;
background: #f9f2f4;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
background-position: center right .625em;
background-repeat: no-repeat;
padding-right: 2.25rem;
background-size: 1.25rem 1.25rem;
}
input.ng-valid.ng-touched {
background: #f9fcf5;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#5cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
background-position: center right .625rem;
background-repeat: no-repeat;
padding-right: 2.25rem;
background-size: 1.25rem 1.25rem;
}
.fieldset {
display: flex;
}
.fieldset .column {
flex: 1;
padding: 5px 7px;
line-height: 35px;
}
.fieldset:hover {
background: #ebf5de;
box-sizing: border-box;
outline: 1px solid #60a250;
}
.fieldset:hover .hint {
display: block;
}
.hint {
position: absolute;
display: none;
}
input {
box-sizing: border-box;
}
<div class="content-body">
<div class="row fieldset">
<div class="column column-3">
<label for="fistName">Name</label>
</div>
<div class="column column-5">
<input id="fistName" type="text" required name="lasttName" ng-model="form.lasttName" />
</div>
<div class="column column-4">
<span class="hint">
Name
Please enter your name
</span>
</div>
</div>
<div class="row fieldset">
<div class="column column-3">
<label for="lastName">Surname</label>
</div>
<div class="column column-5">
<input id="lastName" type="text" required name="lasttName" ng-model="form.lasttName" />
</div>
<div class="column column-4">
<span class="hint">
Surname
Please enter your surname
</span>
</div>
</div>
</div>
If I just copy paste code and adjust markup it is all fine, but I don't want to repeat all that code, so I created custom directive.
Working with 1st and 3rd col is easy, it is just text string I need to display,
2nd col is pain...
I need to check input state, for most of the time without using directive it is as mentioned before $invalid && $dirty, but I have no idea how can I do that in directive. If someone is interested in helping me out I can send you archieved solution with my exact issue
I'm using AngularJS v1.6.0-rc.2. I am making a modal-like chat box and I've found a major problem. I wonder why the message can't be pushed into an array when I clicked on a button 'Send' like this. I assume that the message is sent as "sender".
View
<html>
<head>
<!-- I've included the script, CSS file, and fonts -->
</head>
<body ng-app='ModalDemo'>
<div ng-controller='MyCtrl'>
<b ng-click='toggleModal()'><label>username</label></b>
<modal-dialog show='modalShown' width='250px' height='370px'>
<name>
<span>username</span>
</name><hr>
<content>
<div width=100% ng-repeat='message in messages'>
<div ng-if='message.u==1'><span class='sender'>{{message.m}}</span></div>
<div ng-if='message.u==0'><span class='receiver'>{{message.m}}</span></div>
</div><span class='sender'>{{textmsg}}</span>
</content>
</modal-dialog>
</div>
</body>
</html>
Model & Controller
<script>
var app = angular.module('ModalDemo',[]);
app.directive('modalDialog', function() {
return {
scope: {
show: true;
},
replace: true,
transclude: {
'name': '?name',
'content': '?content'
},
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'>\n\
<div class='ng-modal-overlay' ng-click='hideModal()'></div>\n\
<div class='ng-modal-dialog' ng-style='dialogStyle'>\n\
<div class='ng-modal-name' ng-transclude='name'></div>\n\
<div class='ng-modal-close' ng-click='hideModal()'>_</div>\n\
<div class='ng-modal-dialog-content' ng-transclude='content'></div>\n\
<div class='ng-modal-textbox'>\n\
<input class='textinput' ng-model='textmsg'>
<button ng-click='send()' class='send'>Send</button>\n\
</div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
$scope.messages=[
{'m':'hi','u':1},
{'m':'hello', 'u':1},
{'m':'is it username?', 'u':1},
{'m':'yeah!','u':0}];
$scope.send = function(){
$scope.messages.push(
{'m':$scope.textmsg, 'u':1 }
);
$scope.textmsg="";
};
}]);
</script>
Here is my CSS file if needed.
CSS
.ng-modal-overlay {
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.0;
}
.ng-modal-dialog {
z-index:10000;
position: fixed;
width: 50%;
bottom: 0px;
left: 75%;
box-shadow: 1px 1px 2px #000000;
background-color: #fff;
}
.ng-modal-dialog-content {
text-align: left;
overflow-y: scroll;
height: 300px;
width:100%;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 3px 6px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
color: white;
}
.ng-modal-name{
background:#4A86E8;
padding:10px;
color: white;
}
.ng-modal-textbox{
width:100%;
height: 25px;
border-top: 1px solid black;
bottom:0px;
position:absolute;
}
.send{
background: #4a86e8;
border: 0;
font-size: 1em;
color: white;
float: right;
height:inherit;
font-family: 'Montserrat';
}
.textinput{
width: 185px;
font-size: 1em;
border: 0;
padding-left: 3px;
}
.sender{
float: right;
margin:8px;
padding: 5px 8px;
border-radius: 6px;
font-family: arial;
background: #8eb5f2;
box-shadow: 1px;
color: white;
font-size: 0.8em;
box-shadow: 1px 1px 6px #000;
max-width: 60%;
}
.receiver{
float:left;
margin:8px;
padding: 5px 8px;
border-radius: 6px;
font-family: arial;
box-shadow: 1px;
color: black;
font-size: 0.8em;
background: #eaebed;
box-shadow: -1px 1px 6px #000;
max-width: 60%;
}
Here is his working PLUNKER for his problem
I have fixed all the errors but ever thing is working fine.
Every thing goes fine,
You missed a lot of brackets here that messed your code.
return {
scope: {
show: true,
replace: true,
transclude: {
'name': '?name',
'content': '?content'
},
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
Also your push
var obj= {
'm':$scope.textmsg,
'u':1
}
$scope.messages.push(obj);
Please tell me one thing which the place your clicking to toggle in this HTML, Also do you think it is clickable?
<b ng-click="toggleModal()">
<label>username</label>
</b>
var myapp = angular.module('sortableApp', ['ui.sortable']);
myapp.controller('sortableController', function($scope) {
var tmpList = [];
for (var i = 1; i <= 6; i++) {
tmpList.push({
text: 'Item ' + i,
value: i
});
}
$scope.list = tmpList;
$scope.sortingLog = [];
$scope.sortableOptions = {
update: function(e, ui) {
var logEntry = tmpList.map(function(i) {
return i.value;
}).join(', ');
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i) {
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
}
};
});
.list {
list-style: none outside none;
margin: 10px 0 30px;
}
.item {
width: 200px;
padding: 5px 10px;
margin: 5px 0;
border: 2px solid #444;
border-radius: 5px;
background-color: #EA8A8A;
font-size: 1.1em;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.ui-sortable-helper {
cursor: move;
}
.well {
cursor: move;
}
/*** Extra ***/
body {
font-family: Verdana, 'Trebuchet ms', Tahoma;
}
.logList {
margin-top: 20px;
width: 250px;
min-height: 200px;
padding: 5px 15px;
border: 5px solid #000;
border-radius: 15px;
}
.logList:before {
content: 'log';
padding: 0 5px;
position: relative;
top: -1.1em;
background-color: #FFF;
}
.container {
width: 1100px;
margin: auto;
}
h2 {
text-align: center;
}
.floatleft {
float: left;
}
.clear {
clear: both;
}
.nestedDemo ul[dnd-list],
.nestedDemo ul[dnd-list] > li {
position: relative;
}
.nestedDemo .dropzone ul[dnd-list] {
min-height: 42px;
margin: 0px;
padding-left: 0px;
}
.nestedDemo .dropzone li {
background-color: #fff;
border: 1px solid #ddd;
display: block;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<div ng-app="sortableApp">
<div ng-controller="sortableController" class="container">
<h2>ui.sortable demo</h2>
<div class="col-md-12">
<div class="span4">
<div ui-sortable="sortableOptions" ng-model="list">
<div ng-repeat="item in list" class="well">
{{item.text}}
</div>
</div>
</div>
</div>
<div class="floatleft" style="margin-left: 20px;">
<ul class="list logList">
<li ng-repeat="entry in sortingLog track by $index">
{{entry}}
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
Dynamically insert items on this list and it should be able to add list dynamically. List and items should be added on button click event. On each button click, a pop up should arise and ask for corresponding item/list name. List cannot be dragged into an item. They can only be draged above or below existing list. view of output
List and items should be sorted after each drag as shown in the attached image. In the attached image section stands for list and lecture stands for image.
here is my code:
I Have no idea where the error should be. i just received this error.
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=studentfeedback&p1=….c%20(https%3A%2F%2Fcode.angularjs.org%2F1.5.0%2Fangular.min.js%3A20%3A449)
I delete everything I added that day but i didn't change anything.
only if i fully cleared my html and angular the error is gone :p. so I have no clue where to find the error. I hope somebody can help me. thanks
(function(){
var app = angular.module('studentfeedback', ['ngAnimate']);
app.factory('Global', function(){
var user = {};
user.loggedin = false;
user.achternaam;
user.voornaam;
user.vakken = [];
user.periodecodes = [];
return user;
})
/*
app.service('sharedProperties', function () {
var loggedin = false;
return {
getloggedin: function () {
return loggedin;
},
setloggedin: function(value) {
loggedin = value;
}
};
});
*/
app.controller('LoginController', [ '$http', '$scope','$timeout', 'Global', function($http, $scope , $timeout, Global ){
this.panelToggle = true; //true= login / false = register
this.loggedin = Global.loggedin;
//console.log("user:0110495-12, pass:LV ");
this.checklogin = function(){
var logincontroller = this;
//studentid 0110495-12 initials LV
$http.jsonp("http://multimediatechnology.be/workload/stud.php?studentid="+ this.username+ "&initials="+ this.passwoord +"&callback=JSON_CALLBACK"
/* , {apikey:"test", params:{
studentid : $scope.username ,
initials : $scope.passwoord
}}*/
).success( function(data){
if (data.state == "Success") {
$(".formdiv").addClass("vanish");
$timeout(function(){ logincontroller.loggedin = true; Global.loggedin=true;}, 500).then( $("h2").addClass("slidein") );
$("body").addClass("whitebackground");
Global.achternaam = data.student.achternaam;
Global.voornaam = data.student.voornaam;
for(vak in data.courses){
for (code in Global.periodecodes ) {
if(data.courses[vak].periodecode == Global.periodecodes[code]){
Global.vakken.push(data.courses[vak]);
}
}
}
console.log(data.courses);
console.log(Global.vakken);
}else{
$(".loginform").addClass("shake");
$timeout(function(){ $(".loginform").removeClass("shake"); }, 500);
}
});
};
}]);
app.controller('TimeController', [ '$http', '$scope','$timeout', 'Global',function($http, $scope , $timeout , Global){
$scope.week;
$scope.date;
$scope.periodenaam = [];
$scope.periodecode = [];
$http.jsonp("http://multimediatechnology.be/workload/week.php?callback=JSON_CALLBACK").success( function(data){
//WEEK
$scope.week = data.weeknr;
console.log("week="+ $scope.week);
//DATUM
this.year = data.date.year;
this.month = data.date.month;
this.day = data.date.day;
if(this.month < 10){
this.month = "0"+this.month;
}
if(this.day < 10){
this.day = "0"+this.day;
}
$scope.date = this.year+"-"+this.month +"-"+this.day;
console.log("date="+ $scope.date);
});
$http.jsonp(" http://multimediatechnology.be/workload/periode.php?callback=JSON_CALLBACK").success( function(data){
for(periode in data.periods){
if( $scope.date > data.periods[periode].start.full && $scope.date < data.periods[periode].eind.full) {
Global.periodecodes.push(data.periods[periode].periodecode);
//$scope.periodenaam.push(data.periods[periode].periodenaam);
}else{
//not right period
}
}
console.log("alle periodecodes = "+ Global.periodecodes);
//console.log("alle periodenamen = "+ $scope.periodenaam);
});
}]);
app.controller('UserController', [ '$http', '$scope','$timeout', 'Global', '$rootElement',function($http, $scope , $timeout , Global, $rootElement){
this.data = Global;
this.savepunten = function(){
};
}])();
});
<!DOCTYPE html>
<html ng-app="studentfeedback">
<head>
<meta charset="utf-8">
<title>Student Feedback</title>
<link href='https://fonts.googleapis.com/css?family=Oxygen|Lobster|Nunito|Asap|Merriweather+Sans|Pacifico|Righteous|Comfortaa|Fredoka+One|Amaranth|Gloria+Hallelujah|Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body >
<div class="formdiv" ng-controller="LoginController as Login" ng-hide="Login.loggedin">
<img class="owl" src="img/ow2l.png" alt="owl" />
<img class="owl2" src="img/owl3.png" alt="owl" />
<form name="loginform" class="loginform" ng-submit="loginform.$valid && Login.checklogin()" novalidate>
<h1>Student Feedback</h1>
<div class="login" ng-show="Login.panelToggle" >
<a class="logintab active" href="" >Login</a>
<a class="registreertab " href="" ng-click="Login.panelToggle = !Login.panelToggle">Registreer</a>
<label for="username">Studenten nummer</label>
<input type="input" name="username" id="username" value="0110495-12" placeholder="0086868-53" ng-model="Login.username" required>
<label for="passwoord">initialen</label>
<input type="input" name="passwoord" id="passwoord" placeholder="BD" ng-model="Login.passwoord" required>
Passwoord vergeten?
<input class="loginbutton" type="submit" name="login" class="preload" value="Login" >
</div>
<div class="register" ng-show="!Login.panelToggle">
<a class="logintab2" href="" ng-click="Login.panelToggle = !Login.panelToggle" >Login</a>
<a class="registreertab2 active" href="">Registreer</a>
<label for="studentennummer">Studentennummer</label>
<input type="input" name="studentennummer" id="studentennummer">
<label for="kdgmail">kdgmail</label>
<input type="input" name="kdgmail" id="kdgmail">
<label for="username">gebruikersnaam</label>
<input type="input" name="username" id="username">
<label for="password">passwoord</label>
<input type="password" name="password" id="password">
<input type="submit" name="registreer" class="preload" value="Registreer">
</div>
</form>
</div>
.
<div class="studentpanel" ng-controller="UserController as User" ng-show="User.data.loggedin">
<header class="clearfix">
<h2 class="s">{{User.data.voornaam +" "+ User.data.achternaam}} </h2>
<div class="weekdiv" ng-controller="TimeController as Time">
<div class="activeweek">
<h4 >WEEK {{week}}</h4>
</div>
</div>
</header>
<div class="vakkendiv clearfix">
<form method="post" ng-submit="Login.savepunten()" >
<div class="vakken" ng-repeat="vak in User.data.vakken" >
<p>{{vak.vaknaam}}</p>
<input class="punt" type="text">
<img class="underline" src="img/underline.png" alt="underline">
</div>
<input type="submit" name="oplsaan" value="Opslaan">
</form>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-animate.min.js"></script>
<script type="text/javascript" src="js/jquery.spriteOnHover-0.2.5.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="style.js"></script>
</body>
</html>
There is a problem in your javascript file
var app = angular.module('studentfeedback', ['ngAnimate']);
app.factory('Global', function(){
var user = {};
user.loggedin = false;
user.achternaam;
user.voornaam;
user.vakken = [];
user.periodecodes = [];
return user;
})
/*
app.service('sharedProperties', function () {
var loggedin = false;
return {
getloggedin: function () {
return loggedin;
},
setloggedin: function(value) {
loggedin = value;
}
};
});
*/
app.controller('LoginController', [ '$http', '$scope','$timeout', 'Global', function($http, $scope , $timeout, Global ){
this.panelToggle = true; //true= login / false = register
this.loggedin = Global.loggedin;
//console.log("user:0110495-12, pass:LV ");
this.checklogin = function(){
var logincontroller = this;
//studentid 0110495-12 initials LV
$http.jsonp("http://multimediatechnology.be/workload/stud.php?studentid="+ this.username+ "&initials="+ this.passwoord +"&callback=JSON_CALLBACK"
/* , {apikey:"test", params:{
studentid : $scope.username ,
initials : $scope.passwoord
}}*/
).success( function(data){
if (data.state == "Success") {
$(".formdiv").addClass("vanish");
$timeout(function(){ logincontroller.loggedin = true; Global.loggedin=true;}, 500).then( $("h2").addClass("slidein") );
$("body").addClass("whitebackground");
Global.achternaam = data.student.achternaam;
Global.voornaam = data.student.voornaam;
for(vak in data.courses){
for (code in Global.periodecodes ) {
if(data.courses[vak].periodecode == Global.periodecodes[code]){
Global.vakken.push(data.courses[vak]);
}
}
}
console.log(data.courses);
console.log(Global.vakken);
}else{
$(".loginform").addClass("shake");
$timeout(function(){ $(".loginform").removeClass("shake"); }, 500);
}
});
};
}]);
app.controller('TimeController', [ '$http', '$scope','$timeout', 'Global',function($http, $scope , $timeout , Global){
$scope.week;
$scope.date;
$scope.periodenaam = [];
$scope.periodecode = [];
$http.jsonp("http://multimediatechnology.be/workload/week.php?callback=JSON_CALLBACK").success( function(data){
//WEEK
$scope.week = data.weeknr;
console.log("week="+ $scope.week);
//DATUM
this.year = data.date.year;
this.month = data.date.month;
this.day = data.date.day;
if(this.month < 10){
this.month = "0"+this.month;
}
if(this.day < 10){
this.day = "0"+this.day;
}
$scope.date = this.year+"-"+this.month +"-"+this.day;
console.log("date="+ $scope.date);
});
$http.jsonp(" http://multimediatechnology.be/workload/periode.php?callback=JSON_CALLBACK").success( function(data){
for(periode in data.periods){
if( $scope.date > data.periods[periode].start.full && $scope.date < data.periods[periode].eind.full) {
Global.periodecodes.push(data.periods[periode].periodecode);
//$scope.periodenaam.push(data.periods[periode].periodenaam);
}else{
//not right period
}
}
console.log("alle periodecodes = "+ Global.periodecodes);
//console.log("alle periodenamen = "+ $scope.periodenaam);
});
}]);
app.controller('UserController', [ '$http', '$scope','$timeout', 'Global', '$rootElement',function($http, $scope , $timeout , Global, $rootElement){
this.data = Global;
this.savepunten = function(){
};
}]);
body{
background-color:#d8d8d8 ;
font-family: 'Merriweather Sans', sans-serif;
margin: 0px;
animation-duration: 3s;
animation-fill-mode: both;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ease{
-webkit-transition: all 2s ease ; /* property duration timing-function delay */
-moz-transition: all 2s ease ;
-o-transition: all 2s ease ;
transition: all 2s ease ;
}
.preload{
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
.loginform{
background-color: rgb(49, 49, 49);
box-shadow: 0 10px 15px 10px rgba(0,0,0,0.2);
margin-left: auto;
margin-right: auto;
margin-top: 10%;
width: 400px;
display: block;
overflow: auto;
animation-duration: 0.5s;
animation-fill-mode: both;
}
.formdiv{
margin-left: auto;
margin-right: auto;
margin-top: 10%;
width: 400px;
display: block;
animation-duration: 0.5s;
animation-fill-mode: both;
}
h1{
margin: 20px;
text-align: center;
font-family: 'Nunito', sans-serif;
color: white;
}
.registreertab, .logintab , .logintab2 , .registreertab2{
border: none;
background-color: rgb(42, 42, 42);
width: 50%;
float: left;
font-size: 18px;
color: white;
text-decoration: none;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 30px;
border-bottom: 1px solid white;
border-top: 1px solid white;
box-shadow: inset 0 0 0 0 white;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.active{
color: rgb(49, 49, 49);
background-color: white;
box-shadow: inset 0 0 0 0 rgb(42, 42, 42);
}
.loginhover {
box-shadow: inset 200px 0px 0px 0px rgb(42, 42, 42);
color: white;
}
.registreerhover{
box-shadow: inset 200px 0px 0px 0px white;
color: rgb(49, 49, 49);
}
.loginhover2 {
box-shadow: inset -200px 0px 0px 0px rgb(42, 42, 42);
color: white;
}
.registreerhover2{
box-shadow: inset -200px 0px 0px 0px white;
color: rgb(49, 49, 49);
}
label{
margin-left: 10%;
color: white;
margin-top: 10px;
margin-bottom: 10px;
display: block;
}
input{
margin-left: 10%;
margin-top: 10px;
margin-bottom: 20px;
display: block;
transition: border 0.4s;
border: none;
}
input:not(:last-child){
width: 80%;
height: 30px;
font-size: 18px;
border-radius: 2px;
box-shadow: 0px 5px 7px rgba(0,0,0,0.2);
}
.loginbutton{
margin-right: 10%;
background-color: green;
border-radius: 30px;
color: white;
float: right;
padding: 8px;
padding-left: 30px;
padding-right: 30px;
font-weight: 700;
font-size: 15px;
outline: none;
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */
-webkit-transition: background-color 0.5s ease, color 0.5s ease ;
-moz-transition: background-color 0.5s ease, color 0.5s ease;
-ms-transition: background-color 0.5s ease, color 0.5s ease;
-o-transition: background-color 0.5s ease, color 0.5s ease;
transition: background-color 0.5s ease, color 0.5s ease;
}
.loginbutton:hover{
background-color: rgb(165, 255, 165);
color: green;
}
input.ng-invalid{
outline-color: #FA787E;
border: 1px solid #FA787E;
}
input.ng-valid{
outline-color: #78FA89;
border: 1px solid #78FA89;
}
.passlink{
display: inline-block;;
font-size: 13px;
margin-top: 15px;
margin-left: 10%;
color: white;
}
.owl{
position: absolute;
z-index: -1;
margin-left: 240px;
width: 150px;
animation-name: OwlSearchingForYou;
animation-duration: 30s;
animation-iteration-count: infinite;
}
.owl2{
position: absolute;
float: right;
margin-top: 10%;
z-index: -1;
width: 150px;
animation-name: OwlSearchingForYou2;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes OwlSearchingForYou {
0%,35%, 53% {transform: translateX(0);}
40%, 50%{transform: translateX(130px);}
}
#keyframes OwlSearchingForYou2 {
0%,82%, 100% {transform: translateX(0);}
87%, 97%{transform: translateX(-110px);}
}
#keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 50%, 90% {transform: translateX(-10px);}
30%, 70% {transform: translateX(10px);}
}
.shake {
-webkit-transform: translate3d(0,0,0);
animation-name: shake;
}
#keyframes vanish {
0% {transform: scale(1); opacity: 1;}
100% {transform: scale(1.15); opacity: 0;}
}
.vanish {
-webkit-transform: translate3d(0,0,0);
animation-name: vanish;
}
/*USER INTERFACE*/
h2 {
color: white;
font-size: 2vw;
margin: 0px;
display: inline;
margin-top: 5%;
margin-bottom: 5%;
padding-top: 2%;
float: left;
height: 130px;
width: 50%;
text-align: center;
animation-duration: 2s;
animation-fill-mode: both;
background-image: url(img/paperstroke3.png);
background-repeat: no-repeat;
background-size: 100%;
}
#keyframes slidein {
0% {transform: translateX(-100%); }
100% {transform: translateX(0px); }
}
.slidein {
-webkit-transform: translate3d(0,0,0);
animation-name: slidein;
}
#keyframes whitebackground {
0% { background-image:url(img/flatcolor.jpg) ;}
100% {background-image:url(img/table.jpg);}
}
.whitebackground {
animation-name: whitebackground;
}
.weekdiv{
float: right;
width: 50%;;
}
h3, h4{
font-family: 'Special Elite', cursive;
margin: 0px;
text-align: center;
display: block;
margin-right: 2%;
}
h4, .activeweek a{
display: inline-block;
vertical-align: top;
}
h4{
font-size: 4vw;
padding-top: 10%;
padding-bottom: 10%;
width: 18vw;
}
.activeweek{
height: 10vw;
font-size: 4vw;
margin-bottom: 50px;
background-image: url(img/week.png);
background-size: 100%;
background-repeat: no-repeat;
}
#prevweek{
width: 24.1666666666%;
float: left;
display: inline-block;
height: 83.854166666666%;
background: url(img/spritesheetprevweek.png) ;
background-size: 1500%;
}
.vakkendiv{
margin-top: 200px;
width: 80%;
margin: auto;
}
.vakken{
float: left;
display: inline-block;
height: 200px;
width: 200px;
background-image: url(img/yellow-sticky-note.png);
background-size: cover;
margin-right: 20px;
margin-bottom: 20px;
-webkit-transition: all 1s ease ;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.vakken.ng-enter{
opacity: 0;
-webkit-transition:0.5s linear all;
transition:0.5s linear all
}
.vakken.ng-enter-stagger{
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit- transition-duration: 0s;
-moz- transition-duration: 0s;
-ms- transition-duration: 0s;
-o- transition-duration: 0s;
transition-duration: 0s;
}
.vakken.ng-enter-active{
opacity: 1;
}
.vakken p {
text-align: center;
height: 25%;
}
input.punt{
margin: auto;
height: 45%;
width: 85%;
margin-left: 5%;
text-align: center;
font-size: 45px;
outline: none;
box-shadow: none;
font-family: 'Gloria Hallelujah', cursive;
background-color: rgba(255, 255, 255, 0);
}
.underline{
width: 70%;
opacity: 0.8;
vertical-align: top;
margin-left: 15%;
}
/*CLEARFIX*/
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<!DOCTYPE html>
<html ng-app="studentfeedback">
<head>
<meta charset="utf-8">
<title>Student Feedback</title>
<link href='https://fonts.googleapis.com/css?family=Oxygen|Lobster|Nunito|Asap|Merriweather+Sans|Pacifico|Righteous|Comfortaa|Fredoka+One|Amaranth|Gloria+Hallelujah|Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body >
<div class="formdiv" ng-controller="LoginController as Login" ng-hide="Login.loggedin">
<img class="owl" src="img/ow2l.png" alt="owl" />
<img class="owl2" src="img/owl3.png" alt="owl" />
<form name="loginform" class="loginform" ng-submit="loginform.$valid && Login.checklogin()" novalidate>
<h1>Student Feedback</h1>
<div class="login" ng-show="Login.panelToggle" >
<a class="logintab active" href="" >Login</a>
<a class="registreertab " href="" ng-click="Login.panelToggle = !Login.panelToggle">Registreer</a>
<label for="username">Studenten nummer</label>
<input type="input" name="username" id="username" value="0110495-12" placeholder="0086868-53" ng-model="Login.username" required>
<label for="passwoord">initialen</label>
<input type="input" name="passwoord" id="passwoord" placeholder="BD" ng-model="Login.passwoord" required>
Passwoord vergeten?
<input class="loginbutton" type="submit" name="login" class="preload" value="Login" >
</div>
<div class="register" ng-show="!Login.panelToggle">
<a class="logintab2" href="" ng-click="Login.panelToggle = !Login.panelToggle" >Login</a>
<a class="registreertab2 active" href="">Registreer</a>
<label for="studentennummer">Studentennummer</label>
<input type="input" name="studentennummer" id="studentennummer">
<label for="kdgmail">kdgmail</label>
<input type="input" name="kdgmail" id="kdgmail">
<label for="username">gebruikersnaam</label>
<input type="input" name="username" id="username">
<label for="password">passwoord</label>
<input type="password" name="password" id="password">
<input type="submit" name="registreer" class="preload" value="Registreer">
</div>
</form>
</div>
.
<div class="studentpanel" ng-controller="UserController as User" ng-show="User.data.loggedin">
<header class="clearfix">
<h2 class="s">{{User.data.voornaam +" "+ User.data.achternaam}} </h2>
<div class="weekdiv" ng-controller="TimeController as Time">
<div class="activeweek">
<h4 >WEEK {{week}}</h4>
</div>
</div>
</header>
<div class="vakkendiv clearfix">
<form method="post" ng-submit="Login.savepunten()" >
<div class="vakken" ng-repeat="vak in User.data.vakken" >
<p>{{vak.vaknaam}}</p>
<input class="punt" type="text">
<img class="underline" src="img/underline.png" alt="underline">
</div>
<input type="submit" name="oplsaan" value="Opslaan">
</form>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-animate.min.js"></script>
<script type="text/javascript" src="js/jquery.spriteOnHover-0.2.5.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="style.js"></script>
</body>
</html>
I think there's and issue with }])(); in the javascript file