ModalDemo running

src/main/resources/static/js/controllers.js

@@ -298,3 +298,55 @@ transactionControllers.controller('TransactionDetailCtrl', [ '$scope', '$routePa
 
 } ]);
 
+
+
+
+transactionControllers.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
+	
+	$scope.items = ['item1', 'item2', 'item3'];
+	$scope.animationsEnabled = true;
+	
+	$scope.open = function (size) {
+		var modalInstance = $uibModal.open({
+			animation: $scope.animationsEnabled,
+			templateUrl: 'myModalContent.html',
+			controller: 'ModalInstanceCtrl',
+			size: size,
+			resolve: {
+				items: function () {
+					return $scope.items;
+				}
+			}
+		});
+
+		modalInstance.result.then(function (selectedItem) {
+			$scope.selected = selectedItem;
+		}, function () {
+			$log.info('Modal dismissed at: ' + new Date());
+		});
+	};
+
+	$scope.toggleAnimation = function () {
+		$scope.animationsEnabled = !$scope.animationsEnabled;
+	};
+
+});
+
+// Please note that $uibModalInstance represents a modal window (instance) dependency.
+// It is not the same as the $uibModal service used above.
+
+transactionControllers.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
+
+	$scope.items = items;
+	$scope.selected = {
+		item: $scope.items[0]
+	};
+
+	$scope.ok = function () {
+		$uibModalInstance.close($scope.selected.item);
+	};
+
+	$scope.cancel = function () {
+		$uibModalInstance.dismiss('cancel');
+	};
+});

src/main/resources/static/partials/transaction-list.html

@@ -10,8 +10,6 @@
 		
 		<div class="col-md-offset-4 col-md-4 col-xs-offset-1 col-xs-10">
 			
-			<br />
-				
 			<div ng-show="lastSubmission" class="lastSubmission col-xs-offset-1 alert alert-info" role="alert">
 				{{lastSubmission.date | date:'dd.MM.yyyy'}}
 				<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}}&nbsp;€</span>
@@ -19,7 +17,7 @@
 				<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
 			</div>
 			
-			<div class="row">
+			<div class="row" style="margin-top:2em;">
 				<form name="form" ng-submit="postTransaction()">
 				
 					<div class="row form-group">
@@ -67,7 +65,7 @@
 							class="form-control">
 					</div>
 	
-					<div class="row form-group">
+					<div class="row form-group" ng-show="accountUsers.length > 1">
 						<label for="expenseInput">Auslage</label>
 						<div>
 							&nbsp;<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />&nbsp;Keine&nbsp;&nbsp;</label>
@@ -82,29 +80,31 @@
 				</form>
 			</div>
 			
-			<table class="listing">
+			<div class="row">
-				<tr>
+				<table class="listing">
-					<th>Datum</th>
+					<tr>
-					<th>Kategorie</th>
+						<th>Datum</th>
-					<th>Betrag</th>
+						<th>Kategorie</th>
-					<th>Beschreibung</th>
+						<th>Betrag</th>
-				</tr>
+						<th>Beschreibung</th>
-				<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
+					</tr>
-					<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
+					<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
-					<td>{{transaction.category.name}}</td>
+						<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
-					<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
+						<td>{{transaction.category.name}}</td>
-					<td>{{transaction.description}}</td>
+						<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
-				</tr>
+						<td>{{transaction.description}}</td>
-			</table>
+					</tr>
-			<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
+				</table>
-				<a href="" ng-click="moreTransactions()">more</a>
+				<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
+					<a href="" ng-click="moreTransactions()">more</a>
+				</div>
+				
+				<div style="margin-top: 2em; text-align: center;">
+					<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
+				</div>
 			</div>
 			
-			<div style="margin-top: 2em; text-align: center;">
+			<div ng-controller="ModalDemoCtrl">
-				<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
-			</div>
-			
-			<!-- div ng-controller="ModalDemoCtrl">
 				<script type="text/ng-template" id="myModalContent.html">
 					<div class="modal-header">
 						<h3 class="modal-title">I'm a modal!</h3>
@@ -128,7 +128,7 @@
 				<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
 				<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
 				<div ng-show="selected">Selection from a modal: {{ selected }}</div>
-			</div-->
+			</div>
 
 			<!-- div>
 				<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>