I am trying to show menus on the homepage(index.html), based on the menuIds.
The menuIds are fetched based on the users role, through a http request to the backend server, when the user logins.
I am setting these menuIds in cookies (login.js)
ng-if directive is used to hide/show specific menus.
Here is the index.html file :
<!DOCTYPE HTML>
<html ng-app="InvoiceApp">
<head>
<title>Invoicing System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/vendor/angular-1.2.6/angular.min.js"></script>
<script type="text/javascript" src="/vendor/angular-1.2.6/angular-route.min.js"></script>
<link href='/vendor/bootstrap/css/bootstrap.min.css' rel='stylesheet' />
<script type="text/javascript" src="/vendor/angular-ui/ui-bootstrap-tpls-0.12.0.js"></script>
<script type="text/javascript" src="/vendor/angular-1.2.6/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/finance/js/adjustments-controllers.js"></script>
<script type="text/javascript" src="/finance/js/invoice-controllers.js"></script>
<script type="text/javascript" src="/finance/js/finance-services.js"></script>
<link rel="icon" href="/img/favicon.ico" >
<link href='/css/main.css' rel='stylesheet' />
<link href='/css/dashboard.css' rel='stylesheet' />
</head>
<body>
<div class="container-fuild">
<div class="row header">
<div class="col-lg-2">
<img src="/img/rbOutlineLogo.png" height="64px" style = "margin-top:15px; margin-left:20px"/>
</div>
<div class="col-lg-10" style="margin-top:15px">
<img src="/img/cis_logo_new.png" height="64px">
</div>
</div>
<div class="row body">
<div class="col-lg-2" ng-controller="SidebarCtrl">
<div class="nav">
<ul class="nav nav-pills nav-stacked" style="padding-top:7px">
<li class="dropdown navBarStyle" ng-if = "**menuList.indexOf(1) !== -1**">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list"></span>
View Invoice
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked" role="menu">
<li class="navBarStyle">
<a href="#/viewByBOCode">
<span class="glyphicon glyphicon-th">
By BO Code & Date Range
</span>
</a>
</li>
<li class="navBarStyle">
<a href="#/viewByInvoiceNumber">
<span class="glyphicon glyphicon-th">
By Invoice Number
</span>
</a>
</li>
</ul>
</li>
<li class="navBarStyle" ng-if = "**menuList.indexOf(2)** !== -1">
<a href="#/configureBO">
<span class="glyphicon glyphicon-edit"></span>
Configure BO
</a>
</li>
<li class="navBarStyle" ng-if = "**menuList.indexOf(3)** !== -1">
<a href="#/approveBO">
<span class="glyphicon glyphicon-edit"></span>
Configure BO Status
</a>
</li>
<li class="navBarStyle" ng-if = "**menuList.indexOf(4)** !== -1">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-th-list"></span>
Download Reports
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked" role="menu">
<li class="navBarStyle">
<a href="#/generateReport">
<span class="glyphicon glyphicon-download-alt"></span>
Invoice & Transaction History Reports
</a>
</li>
<li class="navBarStyle">
<a href="#/yourBusPendingAdjustmentMemos">
<span class="glyphicon glyphicon-download-alt"></span>
YourBus Pending Adjustment Memos
</a>
</li>
</ul>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(5) !== -1">
<a href="#/uploadExcelFile">
<span class="glyphicon glyphicon-upload"></span>
Upload Payment Details
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(6) !== -1">
<a href="#/summary/operator/">
<span class="glyphicon glyphicon-th"></span>
Operator Dashboard
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(7) !== -1">
<a href="#/adjusmentsMemo">
<span class="glyphicon glyphicon-check"></span>
Create Adjustment Memo
</a>
</li>
<li class="dropdown navBarStyle" ng-if = "menuList.indexOf(8) !== -1">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-check"></span>
Advance Payment Adjustments
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked"
ng-if = "menuList.indexOf(9) !== -1 || menuList.indexOf(10) !== -1 || menuList.indexOf(11) !== -1" role="menu">
<li class="navBarStyle"
ng-if = "menuList.indexOf(9) !== -1">
<a href="#/doAdvancePayment">
<span class="glyphicon glyphicon-edit"></span>
Do Adjustment
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(10) !== -1">
<a href="#/approveAdvanceAdjustment">
<span class="glyphicon glyphicon-edit"></span>
Approve Adjustments
</a>
</li>
<li class="navBarStyle"
ng-if = "menuList.indexOf(11) !== -1">
<a href="#/approvedAdvanceAdjustments">
<span class="glyphicon glyphicon-edit"></span>
View Approved Adjustments
</a>
</li>
</ul>
</li>
<li class="dropdown navBarStyle" ng-if = "menuList.indexOf(12) !== -1">
<a href class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-check"></span>
Other Adjustments
<span class="caret"></span>
</a>
<ul class="dropdown-menu nav nav-pills nav-stacked"
ng-if = "menuList.indexOf(13) !== -1 || menuList.indexOf(14) !== -1 || menuList.indexOf(15) !== -1 || menuList.indexOf(16) !== -1" role="menu">
<li class="navBarStyle" ng-if = "menuList.indexOf(13) !== -1">
<a href="#/doOtherAdjustments">
<span class="glyphicon glyphicon-edit"></span>
Do Adjustments for Today
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(14) !== -1">
<a href="#/viewAdjustments">
<span class="glyphicon glyphicon-edit"></span>
View Adjustments
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(15) !== -1">
<a href="#/invoiceAdjustments">
<span class="glyphicon glyphicon-edit"></span>
Approve Adjustments
</a>
</li>
<li class="navBarStyle" ng-if = "menuList.indexOf(16) !== -1">
<a href="#/approvedOtherAdjustments">
<span class="glyphicon glyphicon-edit"></span>
View Approved Adjustments
</a>
</li>
</ul>
</li>
<li ng-if = "menuList.indexOf(17) !== -1" style="background-color: #eee; border-radius:5px">
<a href="#/generateInvoice">
<span class="glyphicon glyphicon-th"></span>
Generate Invoice
</a>
</li>
<li>
<a href="#/logout">
<span class="glyphicon glyphicon-off"></span>
Logout
</a>
</li>
<li>
<a target="_blank" href="https://docs.google.com/document/d/12MMSYpfvCI0A694L5ujOnHziOU71Mhce-iRx99jeFU8/pub?embedded=true">
<span class="glyphicon glyphicon-question-sign"></span>
FAQ
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-10" style="border-left: 1px solid #F0EDED; min-height:528px">
<div ng-view>This is main page.</div>
</div>
</div>
<div class="row footer" style="padding:10px">
<span class="glyphicon glyphicon-copyright-mark"></span>
<script>document.write(new Date().getFullYear())</script> ibibogroup All rights reserved
</div>
</div>
</body>
</html>
Here is the login.js logic to fetch the menuIds based on the user :
var url = '/api/user/login/ui';
$http.post(url, {
userName: $scope.credential.email,
password: $scope.credential.password
}).success(function(data, status, headers, config) {
**$cookies.menuList = data;
$window.location.href = 'index.html';**
}).error(function(data, status, headers, config) {
if (status === 400) {
$scope.errors.push("Invalid Credential, please try again.");
} else {
$scope.errors.push("Service not available currently, please try again after some time.");
}
});
Here is the controller for the index.html
angular.module('**InvoiceControllers**', ['ngCookies'])
.controller('**SidebarCtrl**', function($scope, $cookies, $log, $window) {
**$scope.menuList = [];
$scope.menuList = $cookies.permissions;**
$log.info($scope.menuList);
if (angular.isUndefined($scope.menuList)) {
$window.location.href = 'login.html';
}
});
But upon loading the index.html,
the snippet -> ng-if = "menuList.indexOf(menu_id) !== -1"
is not working.
What i am doing woring here?
You can use by this way
data-ng-if = "menuList.map(function(x) {return x.id; }).indexOf(menu_id) != -1"
But better thing if you use method
data-ng-if = "getMenuStatus(menu_id)"
$scope.getMenuStatus = function(menu_id)
{
return menuList.map(function(x) {return x.id; }).indexOf(menu_id) !== -1;
}
I think it will work
Related
<div class="wrapper" id="body" ng-app="masterview" ng-controller="masterctrl" data-ng-init="getmenus()">
<header id="header">
<div class="header-width row">
<div class="col-xl-9">
<div class="logo float-xs-left">
<a href="#">
<img src="~/img/logo_accord.png" alt="Ace Report" />
</a>
</div>
</div>
<div class="col-xl-3 header-right">
<div class="header-inner-right">
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-comments-o"></i>
</a>
</div>
</div>
<div class="user-dropdown">
<div class="btn-group">
<a href="index.html#" class="user-header dropdown-toggle" data-toggle="dropdown"
data-animation="slideOutUp" aria-haspopup="true"
aria-expanded="false">
<img src="~/assets/images/user.jpg" alt="Profile image" />
</a>
<div class="dropdown-menu user drop-profile dropdown-card dropdown-card-profile animated flipInY">
#*
<header class="card-header d-flex">
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-user"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-power-off"></i>
</a>
</header>*#
<ul class="list-unstyled card-body">
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Manage Accounts</span>
</span>
</a>
</li>*#
<li>
<a href="index.html#">
<span>
<span class="align-middle">Change Password</span>
</span>
</a>
</li>
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Check Inbox</span>
</span>
</a>
</li>*#
<li>
<a href="#Url.Action("Logout", "Admin")">
<span>
<span class="align-middle">Sign Out</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--top menu bar-->
<div id="header-icon" class="" >
<div class="header-width">
<div class="col-xl-12">
<div class="menucontainer">
<div class="overlapblackbg"></div>
<a id="navtoggle" class="animated-arrow">
<span></span>
</a>
<nav id="nav" class="topmenu" role="navigation">
<div class="sidebar-search">
<div class="logo float-xs-left">
</div>
<a href="javascript:void(0)">
<i class="search-close icon_search"></i>
</a>
</div>
<!--left menu-->
<ul id="dvMenuInner" class="nav navbar-nav">
<li ng-repeat="parent in menu" class="dropdown">
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="!parent.children">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="parent.children" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<ul class="dropdown-menu" ng-show="parent.children">
<li ng-repeat="child in parent.children" ng-show="!child.childrencc">
{{child.menuname}}
</li>
<li class="dropdown-submenu" ng-repeat="child in parent.children" ng-show="child.childrencc">
{{child.menuname}}
{{child.menuname}}
<ul class="dropdown-menu" ng-show="child.childrencc">
<li ng-repeat="children in child.childrencc">
{{children.menuname}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<section id="main" class="container-fluid">
<!-- START RIGHT CONTENT -->
#*
<div class="row">
<!-- START RIGHT CONTENT -->
<section id="content-wrapper" class="form-elements">
<!-- START PAGE TITLE -->
<div class="site-content-title">
<h2 class="float-xs-left content-title-main">Client Dashboard</h2>
<!-- START BREADCRUMB -->
<ol class="breadcrumb float-xs-right">
<li class="breadcrumb-item">
<span class="fa fa-home" aria-hidden="true"></span>
Home
</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<!-- END BREADCRUMB -->
</div>
<!-- END PAGE TITLE -->
</section>
</div>*#
#*
<div class="contain-inner"></div>*#
<ng-view> #RenderBody()</ng-view>
</section>
#*
</div>
I want menus to be loaded at the start of the application and I have multiple pages in MVC, so the problem is getting the error stated that controller not registered. so can you tell me how can I handle ng-app and ng-controller in master page and pages?
I am loading menus as follows:
app.controller('masterctrl', function ($scope, $http, $window) {
$scope.getmenus = function () {
var holding_url = encodeURI(APIURL + "getmenus");
$http.get(holding_url)
.then(function (response) {
$scope.names = response.data.t1;
$scope.menu = [];
$scope.childrenmenu = [];
$scope.count = 0;
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid == 0) {
$scope.menu.push(value);
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.menu, function (value2, key2) {
if (value.parentid == value2.menuid) {
if (value2.children == undefined) {
value2.children = [];
value2.showChildren = false;
}
value2.children.push(value);
$scope.childrenmenu.push(value);
}
});
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.childrenmenu, function (value3, key3) {
if (value.parentid == value3.menuid) {
if (value3.childrencc == undefined) {
value3.childrencc = [];
value3.showChildren = false;
}
value3.childrencc.push(value);
}
});
}
});
Please see image due to that error data in table is also not loading properly, because master page and pages controller can not work together.
you need to bootstrap them using angular.bootstrap()
first give id to the child div lets say App2
<div class="ibox float-e-margins" ng-app="childview" id="App2">
</div>
angular.bootstrap(document.getElementById("App2"), ['childview']);
this will allow Angular to run subsequent views to run on the dom
Why not this ?
<div class="wrapper" id="body" ng-app="masterview" >
<div ng-controller="masterctrl" data-ng-init="getmenus()">
<!-- rest of your code --->
</div>
</div>
I have a todo spring boot app works 100% without spring security ,but if i use spring security angularjs will not work any more i use thymeleaf for pages but this page i use HTML with Angular without thymeleaf but angular actions will not work i am sure that the problem is with spring security
HTML PAGE :
<!DOCTYPE html>
<html ng-app="taskManagerApp" >
<head>
<meta charset="utf-8"/>
<!--IE Compatibility Meta-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--first Mobile Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Tasks</title>
<!--css fontawesome jb-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<!--My Css File-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/css/task.css"/>
<link rel="stylesheet" href="/css/animate.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<!--if IT IE 9-->
<script data-require="angular.js#*" data-semver="1.3.0-beta.14"
src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script data-require="angular-animate#*" data-semver="1.3.0-beta.14"
src="http://code.angularjs.org/1.3.0-beta.14/angular-animate.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.nicescroll.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="/js/main-p.js"></script>
<script src="/js/plugin.js"></script>
<!--endif-->
</head>
<body>
<!--==============Start Menu==========-->
<div class="row">
<nav class="navbar navbar-inverse sidebar col-sm-6 col-md-2" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Our logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/main"># Activity<span style="font-size:16px;"
class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a>
</li>
<li><a href="/chat">Chat<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-comments"></span></a>
</li>
<li><a href="/task">Tasks<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-bolt"></span></a>
</li>
<li><a href="/file">Files<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-paperclip"></span></a>
</li>
<li><a href="/calender">Calender<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-calculator"></span></a>
</li>
<li><a href="/search">Search<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-search"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span
class="caret"></span><span style="font-size:16px;"
class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--==========End Section Menu=========-->
<!--==========Start Section Project=========-->
<div class="right-side col-xs-11 col-sm-11 col-md-10">
<!--==========Start Navbar=========-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-brand" class="navbar-brand " href="#">Project name <span
class="fa fa-angle-right"></span></a>
</div>
<div class="navbar-collapse collapse horizon-nav">
<ul id="home-page" class="nav navbar-nav ">
<li id="activ">Activity</li>
</ul>
<ul id="main-menu" class="nav navbar-nav navbar-right">
<li id="profile"><a id="account" href="#" class="dropdown-toggle ">
<img class="img-circle" src="../static/images/1.jpg"
style="margin-right:5%;"/>Mohamed</a>
</li>
<li id="logout">logout
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==========End Navbar=========-->
<!--==========Start Divs=========-->
<!-- this is main Div that contain navbar divs -->
<div id="content" class="yellow col-xs-12">
<!-- add task here !! -->
<div ng-controller="taskManagerController" >
<div id="task-panel" class="fadein fadeout showpanel panel" ng-show="toggle">
<div class="panel-heading ">
<!--<i class="panel-title-icon fa fa-tasks"></i>-->
<div class="panel-heading-controls">
<span class="panel-title">Recent Tasks</span>
<button ng-click="toggle = !toggle" class="btn-panel">Add New Task</button>
<button class="btn-panel " confirmed-click="archiveTasks()"
ng-confirm-click="Would you like to archive completed tasks?">Clear completed tasks
</button>
</div>
</div>
<div class="panel-body">
<div class="task" ng-repeat="task in tasks">
<span ng-if="task.taskPriority=='HIGH'" class="priority priority-red">
{{task.taskPriority}}
</span>
<span ng-if="task.taskPriority=='MEDIUM'" class="priority priority-yellow">
{{task.taskPriority}}
</span>
<span ng-if="task.taskPriority=='LOW'" class="priority priority-green">
{{task.taskPriority}}
</span>
<div class="action-checkbox">
<input id="{{task._links.self.href}}" type="checkbox" value="{{task._links.self.href}}"
ng-checked="selection.indexOf(task._links.self.href) > -1"
ng-click="toggleSelection(task._links.self.href)"/>
<label for="{{task._links.self.href}}"></label>
</div>
<div ng-if="task.taskStatus=='COMPLETED'">
<a href="#" class="checkedClass">
{{task.taskName}}
<span class="action-status">{{task.taskStatus}}</span>
</a>
</div>
<div ng-if="task.taskStatus=='ACTIVE'">
<a href="#" class="uncheckedClass">
{{task.taskName}}
<span class="action-status">{{task.taskStatus}}</span>
</a>
</div>
</div>
</div>
</div>
<div id="add-task-panel" class="fadein fadeout addpanel panel" ng-hide="toggle">
<div class="panel-heading">
<div class="panel-heading-controls">
<i class="panel-title-icon fa fa-plus"></i>
<span class="panel-title panel-title2">Add Task</span>
<button ng-click="toggle = !toggle" class="btn-panel">Show All Tasks</button>
</div>
</div>
<div class="panel-body">
<div class="task">
<table class="add-task">
<tr>
<td>Task Name:</td>
<td><input type="text" ng-model="taskName"/></td>
</tr>
<tr>
<td>Task Description:</td>
<td><input type="text" ng-model="taskDesc"/></td>
</tr>
<tr>
<td>Task Status:</td>
<td>
<select ng-model="taskStatus"
ng-options="status as status for status in statuses">
<option value="">-- Select --</option>
</select>
</td>
</tr>
<tr>
<td>Task Priority:</td>
<td>
<select ng-model="taskPriority"
ng-options="priority as priority for priority in priorities">
<option value="">-- Select --</option>
</select>
</td>
</tr>
<tr>
<td><br/>
<button ng-click="addTask()" class="btn-panel-big">Add New Task</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--==========End Divs=========-->
</div>
<!--==========End Section Project=========-->
</div>
</body>
</html>
App.JS
var taskManagerModule = angular.module('taskManagerApp', ['ngAnimate']);
taskManagerModule.controller('taskManagerController', function ($scope,$http) {
var urlBase="";
$scope.toggle=true;
$scope.selection = [];
$scope.statuses=['ACTIVE','COMPLETED'];
$scope.priorities=['HIGH','LOW','MEDIUM'];
$http.defaults.headers.post["Content-Type"] = "application/json";
function findAllTasks() {
//get all tasks and display initially
$http.get(urlBase + '/tasks/search/findByTaskArchived?archivedfalse=0').
success(function (data) {
if (data._embedded != undefined) {
$scope.tasks = data._embedded.tasks;
} else {
$scope.tasks = [];
}
for (var i = 0; i < $scope.tasks.length; i++) {
if ($scope.tasks[i].taskStatus == 'COMPLETED') {
$scope.selection.push($scope.tasks[i].taskId);
}
}
$scope.taskName="";
$scope.taskDesc="";
$scope.taskPriority="";
$scope.taskStatus="";
$scope.toggle='!toggle';
});
}
findAllTasks();
//add a new task
$scope.addTask = function addTask() {
if($scope.taskName=="" || $scope.taskDesc=="" || $scope.taskPriority == "" || $scope.taskStatus == ""){
alert("Insufficient Data! Please provide values for task name, description, priortiy and status");
}
else{
$http.post(urlBase + '/tasks', {
taskName: $scope.taskName,
taskDescription: $scope.taskDesc,
taskPriority: $scope.taskPriority,
taskStatus: $scope.taskStatus
}).
success(function(data, status, headers) {
alert("Task added");
var newTaskUri = headers()["location"];
console.log("Might be good to GET " + newTaskUri + " and append the task.");
// Refetching EVERYTHING every time can get expensive over time
// Better solution would be to $http.get(headers()["location"]) and add it to the list
findAllTasks();
});
}
};
// toggle selection for a given task by task id
$scope.toggleSelection = function toggleSelection(taskUri) {
var idx = $scope.selection.indexOf(taskUri);
// is currently selected
// HTTP PATCH to ACTIVE state
if (idx > -1) {
$http.patch(taskUri, { taskStatus: 'ACTIVE' }).
success(function(data) {
alert("Task unmarked");
findAllTasks();
});
$scope.selection.splice(idx, 1);
}
// is newly selected
// HTTP PATCH to COMPLETED state
else {
$http.patch(taskUri, { taskStatus: 'COMPLETED' }).
success(function(data) {
alert("Task marked completed");
findAllTasks();
});
$scope.selection.push(taskUri);
}
};
// Archive Completed Tasks
$scope.archiveTasks = function archiveTasks() {
$scope.selection.forEach(function(taskUri) {
if (taskUri != undefined) {
$http.patch(taskUri, { taskArchived: 1});
}
});
alert("Successfully Archived");
console.log("It's risky to run this without confirming all the patches are done. when.js is great for that");
findAllTasks();
};
});
//Angularjs Directive for confirm dialog box
taskManagerModule.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction);
}
});
}
};
}]);
Spring security config :
#Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
#Autowired
UserDetailsService userDS;
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/register","/").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.usernameParameter("email")
.passwordParameter("password")
.defaultSuccessUrl("/dashboard")
.permitAll()
.and()
.logout().logoutSuccessUrl("/login?logout")
.permitAll();
}
#Bean
public BCryptPasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
#Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth
.userDetailsService(userDS).passwordEncoder(passwordEncoder());
}
#Override
protected UserDetailsService userDetailsService() {
return userDS;
}
}
i solved the problem adding
http.csrf().disable();
to spring security config
Check the console of your browser, I guess there will be an error of 'No access Control Allow Origin' present. So you need to implement a "CORS Filter" in your application, spring security does not allow request from different origins, so manually need to allow them. You will get many resources on how to implement CORS in your application.
I followed example given in url below:
http://websystique.com/springmvc/spring-mvc-4-angularjs-example/
thanks
How can I add the selected item from dropdown menu to the button that opens that dropdown?
Example: I want to replace 'DIFFERENCES' with text selected from the dropdown menu; if I select 'All' then the text 'DIFFERENCES' should be replaced with 'All'...
<div class="filter-requests btn-group">
<div data-toggle="dropdown">
<a href="#" class="btn btn-default dropdown-toggle">
DIFFERENCES
<i class="fa fa-chevron-down"></i>
</a>
</div>
<ul class="dropdown-menu">
<li>All</li>
<li><a href="#" >Exclusions</a></li>
<li><a href="#" >Differences</a></li>
<li><a href="#" >Variable Differences</a></li>
<li><a href="#" >Path Differences</a></li>
</ul>
</div>
view.html
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{selected || 'Select one'}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
controller.js
$scope.selected = null;
$scope.changeOption = function(text) {
$scope.selected = text;
}
try like this.
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.row = "";
$scope.items = ['All','Exclusions','Differences','Variable Differences'];
$scope.selectRow = function(item){
$scope.row = item;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="filter-requests btn-group">
<div data-toggle="dropdown">
<a href="#" class="btn btn-default dropdown-toggle">
{{row}}
<i class="fa fa-chevron-down"></i>
</a>
</div>
<ul class="dropdown-menu" >
<li ng-repeat="item in items" ng-click="selectRow(item)">
{{item}}
</li>
</ul>
</div>
I've added the dropdown in the header.html which i included in the index.html of an angular app.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown profile hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="meta">
<span class="text">{{slUserObj.username}}</span>
<span class="caret"></span>
</span>
</a>
<ul class="dropdown-menu animated flipInX" role="menu">
<li>
<a href="javascript:void(0);" ng-click="showProfile();main.page='profile'">
<span class="icon"><i class="fa fa-user"></i>
</span>My Account</a>
</li>
<li>
<a href="javascript:void(0);" ng-click="showProfile();main.page='profile'">
<span class="icon"><i class="fa fa-user"></i>
</span>Carreir Details</a>
</li>
<!--<li>
<a href="javascript:void(0);">
<span class="icon"><i class="fa fa-envelope"></i>
</span>Messages</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="icon"><i class="fa fa-cog"></i>
</span>Settings</a>
</li>-->
<li class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="logout()">
<span class="icon"><i class="fa fa-sign-out"></i>
</span>Logout</a>
</li>
</ul>
</li>
here is the index.html
<section id="main-wrapper" class="theme-default">
<!-- Page wrapper -->
<header id="header" ng-include="'views/header.html'" ng-show="isAuthenticated"></header>
<!-- Left Sidebar Navigation -->
<aside class="sidebar sidebar-left" ng-include="'views/left-sidebar.html'" ng-show="isAuthenticated"></aside>
<!-- Content wraper -->
<section class="main-content-wrapper" ng-class="{'main-content-wrapper':isAuthenticated,'main-content-wrapper-full':!isAuthenticated}">
<!-- Main content view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/footer.html'"></div>
</section>
<!-- /Content wraper-->
Now the dropdown in the header.html is not working once unhiding the header block after login, but its working when i'm refreshing the page after login.
Here's my form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/formController.js"></script>
</head>
<body >
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">IRNIA Meditel</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Form_details
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Create database</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Create Tables
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>id_entity</label>
<input class="form-control">
<p class="help-block">the id is autogenerated</p>
</div>
<div class="form-group">
<label>entity_name</label>
<input class="form-control">
<p class="help-block">the name of table required</p>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper" ng-app="MyApp" ng-controller="formController">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>id_field</th>
<th>name</th>
<th>size</th>
<th>type</th>
</tr>
</thead>
<tbody>
<tr class="table" ng-repeat="bd in bds">
<td> <input type="text" ng-model="bd.id_field" /> </td>
<td><input type="text" ng-model="bd.field_name" /></td>
<td><input type="text" ng-model="bd.size" /></td>
<td><input type="text" ng-model="bd.type" /></td>
</tr>
</tbody>
</table>
<td><button type="button" class="btn btn-primary" ng-click="addRow()">addRow</button></td><br>
<br><button type="submit" class="btn btn-primary">Submit</button>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
I want to add a new row to my table using angular js , for that i declare the controller in the div with ng-controller and the model with ng-model , you will find the details below :
Here's the formController.js
function ExampleCtrl($scope){
$scope.bds = [];
$scope.addRow = function(){
var = {
id_field: $scope.id_field,
field_name: $scope.field_name,
size: $scope.size,
type: $scope.type,
};
$scope.bds.push(bd);
};
}
</html>
When i try to click into the button addRow ,it doesn't work :/
you didn't add angularjs to your project, add the following line:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
And use console.log('message') inide your angular code to debug and check if it's working or where it stops working.
Also avoid using jquery with angular, everything you need to do with jquery is doable with angular and easier, plus it is good practice not to mix both of them.
Try this code if it works.
<table>
<thead>
<tr>
<th>id_field</th>
<th>name</th>
<th>size</th>
<th>type</th>
</tr>
</thead>
<tbody>
<tr class="table" ng-repeat="bd in bds">
<td> <input type="text" ng-model="bd.id_field" /> </td>
<td><input type="text" ng-model="bd.field_name" /></td>
<td><input type="text" ng-model="bd.size" /></td>
<td><input type="text" ng-model="bd.type" /></td>
<td><button type="button" class="btn btn-primary" ng-click="addRow()">addRow</button></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="addRow()">addRow</button>
FormController.js
angular.module('MyApp', [])
.controller('ExampleController', [ '$scope', function($scope) {
$scope.bds = [];
$scope.addRow = function() {
var bd= {
id_field: $scope.id_field,
field_name: $scope.field_name,
size: $scope.size,
type: $scope.type,
};
$scope.bds.push(bd);
}
}]);