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>
Related
I want to show a pop up window when a user selects an element from the dropdown list. But instead im getting a plain text no modal window is being shown. Please help: below is the referece for my code-
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = '';
$scope.accntDetails = {
accnt01: { bankName: "HDFC", bankbranch: "delhi", accntNumber: "12345" },
accnt02: { bankName: "ICICI", bankbranch: "mumbai", accntNumber: "12346" },
accnt03: { bankName: "IDBI", bankbranch: "pune", accntNumber: "12347" }
};
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = true;
};
$scope.changedValue = function(bank) {
$scope.value = bank.bankName;
$scope.toggleModal();
console.log($scope.value);
}
angular.module('myApp').directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
transclude: true,
link: function(scope, element, attrs) {
console.log('attrs: ', attrs);
scope.dialogStyle = {};
if (attrs.boxWidth) {
scope.dialogStyle.width = attrs.boxWidth;
}
if (attrs.boxHeight) {
scope.dialogStyle.height = attrs.boxHeight;
}
scope.hideModal = function() {
scope.modalShown = false;
};
},
template: `<div class='ng-modal' ng-show='modalShown'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content' ng-transclude></div>
</div>
</div>`
};
});
});
/* Custom CSS- this is the css code for showing up a modal */
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #808080;
opacity: 0.8;
}
.ng-modal-dialog {
background-color: #fff;
box-shadow: 10px 10px #595554;
border-radius: 4px;
z-index: 10000;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ng-modal-dialog-content {
padding: 10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select account number:</p>
<!-- <select ng-model="accnt" ng-options="y.bankName for (x, y) in accntDetails">
</select> -->
<select ng-model="bankSelected" ng-change=" toggleModal();"
data-ng-options="bank as bank.bankName for bank in accntDetails">
<option value="">Select Account</option>
</select>
<h1>You selected: {{bankSelected.bankName}}</h1>
<h2>branch: {{bankSelected.bankbranch}}</h2>
<h3>Number: {{bankSelected.accntNumber}}</h3>
<div ng-show="modalShown">
<modal-dialog box-width="400px" box-height="150px">
<div class="row">
<div class="col-md-12">
<h3>Header</h3>
<hr style="border-top:1px solid darkblue" />
</div>
</div>
<div class="row">
<div class="col-md-12">
This is an important message
</div>
</div>
</modal-dialog>
</div>
</div>
</body>
when a user click on any element of the list a modal window should popup. I have tried this code. If i use it onClick event it works fine the modal opens but if i use it with ng-select it doesnt works:
Okay, I think there are two problems here. One is that your JSON is not valid to run on a repeat. It should be an array of Object to get the details. I was able to run the same when I tried that with the JSON as :
CODEPEN
like accntDetails = [{BankDetails1},{BankDetails2},{BankDetails}]
I'm trying to build a SPA using AngularJS. However, I cannot get the routing working for the life of me. Basically I cannot get it to where when you click on one of the list items it routes the view to display different content.
I'm thinking that maybe one of the angularJS files is cancelling itself out or that I am messing up something in the directive.
index.html:
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "assetView.html",
controller: "MainController"
})
.state("assetView", {
url: "/assetView",
templateUrl: "assetView.html",
controller: "MainController"
})
;
}
]);
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('MainController', function MainController($scope){
console.log("inside of MainController");
var vm = this;
$scope.selectedAsset = undefined;
$scope.startDate;
$scope.endDate;
// Current array for testing typeahead feature
// This needs to be an ajax call in the future to populate
// the asset array w/ all ticker symbols
$scope.asset = ['AAAP', 'AABA', 'AABA', 'AAME', 'AAOI',
'AAON', 'AAPL', 'AAWW', 'AAXJ', 'BMTC', 'BNCL',
'BNDX', 'BNFT', 'BNSO', 'CAKE', 'CALA', 'CALD', 'CALI',
'CALL', 'CALM', 'DWTR', 'DXGE', 'DXJS', 'ERII',
'ESBK', 'ESCA'];
/* Datepicker Functions */
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
startDate = getDate(this);
console.log("start date: " + startDate);
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
endDate = getDate(this);
console.log("end date: " + endDate);
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
/* End of Datepicker functions */
/* Chart Data */
var myChart = Highcharts.chart('highchartsContainer', {
chart: {
type: 'column'
},
title: {
text: 'Stock Header Here'
},
colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
xAxis: {
categories: ['Div', 'EL Fix', 'LTT']
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Sample1',
data: [1, 4, 4]
}, {
name: 'Sample2',
data: [5, 7, 3]
},{
name: 'Sample3',
data: [2, 3, 4]
}]
});
/* End Chart Data */
/* Highchart 2 */
var myChart2 =
Highcharts.chart('highchartsContainer2', {
chart: {
type: 'column'
},
title: {
text: 'Stock Header Here'
},
colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
xAxis: {
categories: ['Div', 'EL Fix', 'LTT']
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Sample1',
data: [3, 1, 1]
}, {
name: 'Sample2',
data: [9, 8, 2]
},{
name: 'Sample3',
data: [9, 2, 5]
}]
});
/* End Highchart 2 */
/* Highchart 3 */
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?', function (data) {
Highcharts.stockChart('highchartsContainer3', {
rangeSelector: {
selected: 1
},
title: {
text: 'GOOG Stock Price'
},
series: [{
name: 'GOOG Stock Price',
data: data,
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
/* End Highchart 3 */
});
/* Body Styling */
body {
background-image: url("images/background_image1.png");
}
/* End Body Styling */
/* help.html div */
#helpDiv{
height: 500px;
width: 500px;
background-color: red !important;
}
/* End help.html div */
/* Wrapper Styling */
.wrapper{
background-color: #FFFFFF;
box-shadow: 0px 30px 40px rgba(0,0,0,.5);
margin: 0 auto;
margin-top: 60px;
margin-bottom: 80px;
width: 1200px;
height: 1350px;
}
/* End Wrapper Styling */
/* Header Styling */
.header{
background-color: #66A8EA;
margin: 0 auto;
width: 1250px;
height: 100px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
left: 0;
right: 0;
}
.leftTriangle{
width: 0;
height: 0;
margin-top: 46px;
border-style: solid;
border-width: 0 25px 20px 0;
border-color: transparent #054e9c transparent transparent;
}
.rightTriangle{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 0;
border-color: #054e9c transparent transparent transparent;
margin-top: -20px;
margin-left: 1225px;
}
#stockImageSVG{
height: 65px;
width: 65px;
margin-left: 40px;
margin-top: 20px;
position: absolute;
}
#uncImageSVG{
margin-left: 150px;
margin-top: 10px;
height: 80px;
width: 300px;
position: absolute;
}
#searchBar{
margin-left: 760px;
margin-top: 20px;
width: 388px;
margin-right: 60px;
}
#searchBarButton{
margin-top: -1px;
}
/* Typeahead Dropdown Styling */
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #333333;
text-decoration: none;
background-color: #B9DDFA !important;
}
/* End Typeahead Dropdown Styling */
#dateRangeSelector{
position: absolute;
color: white;
margin-left: 760px;
margin-top: 60px;
}
#from, #to{
color: #5B5B5B;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: thin;
border-color: #D4D4D4;
font-family: Arial;
}
#toLabel{
margin-left: 26px;
}
/* End Header Styling */
/* Navbar Styling */
#custom-bootstrap-menu{
position: absolute;
margin-top: 140px;
margin-left: 30px;
margin-right: 30px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 12px;
background-color: rgba(230, 225, 225, 0.51);
border-width: 0px;
border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
width: 93px;
text-align: center;
color: rgba(119, 119, 119, 1);
background-color: rgba(247, 247, 247, 1);
margin: 0 auto;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(51, 51, 51, 1);
background-color: rgba(169, 207, 242, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(85, 85, 85, 1);
background-color: rgba(219, 219, 219, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #e6e1e1;
}
/* End Navbar Styling */
/* Data Table Styling */
#tableArea{
display: inline-block;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 0px;
margin-top: 190px;
margin-left: 30px;
height: 500px;
width: 500px;
}
#tableContainer{
position: absolute;
margin-top: 10px;
margin-left: 40px;
width: 500px;
height: 480px;
background-color: #fff;
}
#dataTable2{
margin-top: 20px;
margin-left: 50px;
margin-right: 10px;
width: 400px;
background-color: #F9F9F9;
}
/* End Data Table Styling */
/* Chart Area Styling */
#chartArea{
display: inline-block;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 0px;
margin-left: -10px;
margin-top: 190px;
height: 500px;
width: 621px;
}
#chartContainer{
background-color: #fff;
margin-top: 10px;
margin-left: 80px;
height: 480px;
width: 500px;
}
/* End Chart Area Styling */
/* customArea3 Styling */
#customArea3{
display: inline-grid;
height: 520px;
width: 555px;
margin-left: 30px;
margin-top: -10px;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 5px;
}
#customArea3Container{
height: 480px;
width: 500px;
margin-top: 10px;
margin-left: 40px;
background-color: #fff;
}
/* End Custom Area 3 Styling */
/* customArea4 Styling */
#customArea4{
display: inline-grid;
position: relative;
margin-top: -10px;
height: 520px;
width: 561px;
margin-left: -5px;
background-color: #EBEBEB;
border-radius: 0px 0px 5px 0px;
}
#customArea4Container{
height: 480px;
width: 500px;
margin-top: 10px;
margin-left: 20px;
background-color: #fff;
}
/* End Custom Area 4 Styling */
/* Highcharts Styling */
#highchartsContainer{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
#highchartsContainer2{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
#highchartsContainer3{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
/* End Highcharts Styling */
/* Print Button Styling */
#printButton{
position: absolute;
margin-top: 200px;
margin-left: 1150px;
}
#printButton:hover{
background-color: #99badd;
border-color: #fff !important;
}
/* End Print Button Styling */
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>c426</title>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<!-- Angular JS / Angular JS UI Router CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Style Sheets -->
<link rel="stylesheet" href="project.css">
<!-- Controllers -->
<script src="js/app.js" type="text/javascript"></script>
<script src="js/MainController.js" type="text/javascript"></script>
<!-- SweetAlert2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.all.min.js"></script>
<!-- Highcharts CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/adapters/standalone-framework.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- Favicon for Browser Tab -->
<link rel="shortcut icon" type="image/x-icon" href="images/uncIcon2.ico">
</head>
<body ng-controller="MainController">
<div class="header">
<img id="stockImageSVG" src="images/stock_bar_image.svg"/>
<a href="http://www.unc.edu/" target="_blank">
<img id="uncImageSVG" src="images/UNC_logo_white.png"/>
</a>
<div id="dateRangeSelector">
<label for="from">From</label>
<input type="text" id="from" name="from">
<label id="toLabel" for="to">To</label>
<input type="text" id="to" name="to">
</div>
<div class="row">
<div class="col-lg-6">
<div id="searchBar" class="input-group">
<input type="text" class="form-control" placeholder="Search for asset..."
uib-typeahead="name for name in asset | filter:$viewValue | limitTo:8" class="form-control"
ng-model="selectedAsset"/>
<span class="input-group-btn">
<button id="searchBarButton" class="btn btn-default glyphicon glyphicon-search" type="button"></button>
</span>
</div>
</div>
</div>
<div class="leftTriangle"></div>
<div class="rightTriangle"></div>
</div>
<div class="wrapper">
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>GOOGL</li>
<li><a ui-sref="assetView">BIDU</a></li>
<li><a ui-sref="home">YNDX</a></li>
<li>AAPL</li>
<li>IBM</li>
<li>TWTR</li>
<li>VZ</li>
<li>WIFI</li>
<li>FB</li>
<li>IAC</li>
<li>GDDY</li>
<li>AOL</li>
</ul>
</div> <!-- Ends Custom Navbar -->
<button type="button" id="printButton" onclick="window.print();"
class="btn btn-default glyphicon glyphicon-print"
title="Print Page"></button>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<div id="assetView">
<div id="tableArea">
<div id="tableContainer">
<table id="dataTable2" class="table table-bordered">
<thead>
<tr>
<th>{{asset[0]}}</th>
<th>{{asset[11]}}</th>
<th>{{asset[17]}}</th>
<th>{{asset[20]}}</th>
<th>{{asset[25]}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>0.001</td>
<td>0.002</td>
<td>0.001</td>
<td>0.002</td>
</tr>
<tr>
<td>b</td>
<td>0.002</td>
<td>0.003</td>
<td>0.001</td>
<td>0.002</td>
</tr>
<tr>
<td>c</td>
<td>0.2</td>
<td>0.3</td>
<td>0.001</td>
<td>0.002</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="chartArea">
<div id="chartContainer">
<div id="highchartsContainer"></div>
</div>
</div>
<div id="customArea3">
<div id="customArea3Container">
<div id="highchartsContainer2"></div>
</div>
</div>
<div id="customArea4">
<div id="customArea4Container">
<div id="highchartsContainer3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
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.
I experience the following strange behavior in ui-bootstrap and angular 1.4. When I put a footable table directive inside a customized bootstrap panel, called hpanel, the footable initially takes more place than the panel itself:
But if I resize the screen (e.g. by collapsing the Developer Tools panel here), the footable directive draws itself and fits within panel:
Importantly, I've experienced similar problems with angular-c3 charts directives (they load incorrectly, exceeding the size of hpanel, but upon page resize behave fine), so it's probably not just a broken directive.
Have you seen anything similar?
DETAILS:
Below is an HTML template that represents the non-functional part of page. There we have an hpanel and within it a table with angular-footable directive ^1.0.3, applied to it.
Here's the template (toolList.html):
<div class="content">
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Available tools.
</div>
<div class="panel-body">
<input type="text" class="form-control input-sm m-b-md" id="filter" placeholder="Search in table">
<table id="example1" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" data-filter=#filter>
<thead>
<tr>
<th data-toggle="true">Id</th>
<th>Class</th>
<th>Label</th>
<th>Description</th>
<th data-hide="all">Owner</th>
<th data-hide="all">Contributor</th>
<th data-hide="all">Inputs</th>
<th data-hide="all">Outputs</th>
<th data-hide="all">Base command</th>
<th data-hide="all">Arguments</th>
<th data-hide="all">Requirements</th>
<th data-hide="all">Hints</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tool in vm.tools">
<td><a ui-sref="tool-detail({id: tool.id})">{{tool.id}}</a></td>
<td>{{tool.tool_class}}</td>
<td>{{tool.label}}</td>
<td>{{tool.description}}</td>
<td>{{tool.owner}}</td>
<td>{{tool.contributor}}</td>
<td>{{tool.baseCommand}}</td>
<td>{{tool.arguments}}</td>
<td>{{tool.requirements}}</td>
<td>{{tool.hints}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
The footable directive is meant to hide some columns of the table and show them upon click on a table row. It also provides pagination. It doesn't seem to work upon page load, but when I resize the page and the size of screen crosses the media-type margin (so that from medium-size screen it becomes large screen in bootstrap css terms), pagination buttons appear and columns that are meant to be hidden are hidden.
Here's how I import the footable directive in my main module app.js:
require("footable/js/footable");
require("footable/js/footable.filter");
require("footable/js/footable.striping");
require("footable/js/footable.sort");
require("footable/js/footable.paginate");
require("footable/css/footable.core.css")
require("angular-footable");
angular.module("app", [
...,
"ui.footable",
])
I use webpack to load all those modules and bower to install the dependencies.
hpanel is just a scss class, here is its definition:
/* Panels */
.hpanel > .panel-heading {
color: inherit;
font-weight: 600;
padding: 10px 4px;
transition: all .3s;
border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
border-bottom: none;
}
.hpanel > .panel-footer, .hpanel > .panel-section {
color: inherit;
border: 1px solid $border-color;
border-top: none;
font-size: 90%;
background: $color-bright;
padding: 10px 15px;
}
.hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt {
background: #fff;
border-color: $border-color;
border: 1px solid $border-color;
padding: 10px 10px;
border-radius: 2px;
}
.hpanel .panel-body {
background: #fff;
border: 1px solid $border-color;
border-radius: 2px;
padding: 20px;
position: relative;
}
.hpanel.panel-group .panel-body:first-child {
border-top: 1px solid $border-color;
}
.hpanel.panel-group .panel-body {
border-top: none;
}
.panel-collapse .panel-body {
border: none;
}
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px;
}
.panel-tools {
display: inline-block;
float: right;
margin-top: 0;
padding: 0;
position: relative;
}
.hpanel .alert {
margin-bottom: 0;
border-radius: 0;
border: 1px solid $border-color;
border-bottom: none;
}
.panel-tools a {
margin-left: 5px;
color: lighten($color-text, 20%);
cursor: pointer;
}
.hpanel.hgreen .panel-body {
border-top: 2px solid $color-green;
}
.hpanel.hblue .panel-body {
border-top: 2px solid $color-blue;
}
.hpanel.hyellow .panel-body {
border-top: 2px solid $color-yellow;
}
.hpanel.hviolet .panel-body {
border-top: 2px solid $color-violet;
}
.hpanel.horange .panel-body {
border-top: 2px solid $color-orange;
}
.hpanel.hred .panel-body {
border-top: 2px solid $color-red;
}
.hpanel.hreddeep .panel-body {
border-top: 2px solid $color-red-deep;
}
.hpanel.hnavyblue .panel-body {
border-top: 2px solid $color-navy-blue;
}
.hpanel.hbggreen .panel-body {
background: $color-green;
color: #fff;
border:none;
}
.hpanel.hbgblue .panel-body {
background: $color-blue;
color: #fff;
border:none;
}
.hpanel.hbgyellow .panel-body {
background: $color-yellow;
color: #fff;
border:none;
}
.hpanel.hbgviolet .panel-body {
background: $color-violet;
color: #fff;
border:none;
}
.hpanel.hbgorange .panel-body {
background: $color-orange;
color: #fff;
border:none;
}
.hpanel.hbgred .panel-body {
background: $color-red;
color: #fff;
border:none;
}
.hpanel.hbgreddeep .panel-body {
background: $color-red-deep;
color: #fff;
border:none;
}
.hpanel.hbgnavyblue .panel-body {
background: $color-navy-blue;
color: #fff;
border:none;
}
.panel-group .panel-heading {
background-color: $color-bright;
}
.small-header .hpanel {
margin-bottom: 0;
}
.small-header {
padding: 0 !important;
}
.small-header .panel-body {
padding: 15px 25px;
border-right: none;
border-left: none;
border-top: none;
border-radius: 0;
// background: $color-bright;
}
.panel-body h5, .panel-body h4 {
font-weight: 600;
}
.small-header .panel-body h2 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 0 0;
}
.small-header .panel-body small {
color: lighten($color-text, 10%);
}
.hbreadcrumb {
padding: 2px 0px;
margin-top: 6px;
margin-bottom: 0px;
list-style: none;
background-color: #fff;
font-size: 11px;
> li {
display: inline-block;
+ li:before {
padding: 0 5px;
color: $color-navy-blue;
}
}
> .active {
color: lighten($color-text,20%);
}
}
.wrapper {
padding: 10px 20px;
}
.hpanel.collapsed .panel-body, .hpanel.collapsed .panel-footer {
display: none;
}
.hpanel.collapsed .fa.fa-chevron-up:before {
content: "\f078";
}
.hpanel.collapsed .fa.fa-chevron-down:before {
content: "\f077";
}
.hpanel.collapsed.panel-collapse .panel-body {
border-width: 0 1px 1px 1px;
border-color: $border-color;
border-style: solid;
}
.hpanel.collapsed .hbuilt.panel-heading {
border-bottom: 1px solid $border-color;
}
body.fullscreen-panel-mode {
overflow-y: hidden;
}
.hpanel.fullscreen {
z-index: 2030;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
margin-bottom: 0;
}
.hpanel.fullscreen .showhide {
display: none;
}
.hpanel.fullscreen .panel-body {
min-height: calc(100% - 77px);
}
Here's tool.module.js file, which animates the template:
import angular from "angular";
var ToolResource = require("workflow/tool/tool.service");
class ToolListController {
// #ngInject
constructor($location, $stateParams, $state, tools) {
this.$location = $location;
this.$state = $state;
this.$stateParams = $stateParams;
this.tools = tools;
}
}
// #ngInject
function routesList($stateProvider) {
$stateProvider.state("tool-list", {
url: "/tool",
parent: "layout",
templateUrl: "/app/workflow/tool/toolList.html",
controller: "ToolListController",
controllerAs: "vm",
data: {
pageTitle: "Tool",
pareDesc: "List of tools, available for workflow construction.",
},
resolve: {
ToolResource: "ToolResource",
tools: function(ToolResource) {
return ToolResource.query().$promise;
}
}
});
}
module.exports = angular.module("tool", [])
.service('ToolResource', ToolResource)
.controller('ToolListController', ToolListController)
.config(routesList);
tool.service.js:
module.exports = function ToolResource($resource) {
return $resource('/api/tool/:id', {id: '#id'});
}
ANSWER:
Community is awesome!
1.5 years ago this directive was created
12 days ago this bug was fixed by Alexryan in his fork
10 days ago I posted this question on StackOverflow
8 days ago I placed a bounty on this question
7 days ago ziscloud approved pull request
in the morning today the bounty expired and in the nick of time Walfrat found out that the bug was fixed
So, yes, it was a bug in the directive that made it draw itself before getting the data from server. With the bugfix I just added load-when="vm.tools" attribute to the directive and it works fine now.
Thank you, Alexryan, ziscloud, Walfrat and other commenters/answerers. StackOverflow and Github just made my day!
Are you using this directive ? https://github.com/ziscloud/angular-footable/blob/master/src/angular-footable.js. It's an homemade (meaning not done by the editor of the footable) directive so it can be not rightly implemented to works with Angularjs.
Looking at the code it seems that you have to use an attribute load-when if you want to delay the initialization of the grid even though you use the resolve attribute in your state, it can be worth to test it.load-when shall be an empty array at start an will trigger the load after the array won't be empty anymore, but the data binded won't be used for the initialization from what i saw.
Note : i wasn't able to set a proper plnkr myself, i don't know the version you're using (and with which jQuery version) and online links doesn't seems available.
Since you are asynchronously loading data (as was mentioned in the comments) your html is rendered prior to it having any data in it. This means the directive may be fired too early (if it is attempting to adapt based on data). Typically, in this scenario, you'll want to throw an ng-if on the portion of your html that is dependent on the data loading (and show a loading gif or something in its place). You can either run the ng-if off of the data itself being defined, or maintain a separate boolean that you set once the promise is resolved.
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