We Keep Coding

Creating an accordion menu: The submenus are not displayed

I am creating an accordion menu. The headings are displayed but I don't know how to display the submenus?
Something missing on this part? Because, I don't see where is the problem? If you have a solution, I'm really interested.
<ul class="submenu" #submenu>
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
</li>
</ul>
HTML file
<div class="sidebar">
<ul id="accordion" class="accordion">
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<div class="menu" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenu" #submenu>
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
</li>
</ul>
</ng-container>
</li>
</ul>
</div>
Then
export class AppComponent {
menus: Menu[] = [
{
name: 'Markets',
iconClass: 'bx bx-lock-alt',
active: false,
submenu: [
{ name: 'Indice', url: 'https://www.google.be'},
{ name: 'Value', url: '#'}
]
},
{
name: 'Stock',
iconClass: 'bx bx-lock-alt',
active: false,
submenu: [
{ name: 'Currency', url: 'https://www.google.be'},
{ name: 'Devise', url: '#'}
]
},
{
name: 'Traiding',
iconClass: 'bx bx-lock-alt',
active: false,
submenu: [
{ name: 'Day traiding', url: 'https://www.google.be'},
{ name: 'Devise', url: '#'}
]
}
]
selectMenu(parentMenu: { name: string }) : void {
this.menus.forEach(menu => {
if(menu.name !== parentMenu.name){
menu.active = false;
} else {
menu.active = true;
}
})
}
}
There is a reproduction here.
Thank you in advance for your help.

How to use the $compile service to include HTML data with AngularJS directives

I have a controller which is populating content to content areas using ng-repeat. The issue is that some of this content needs to come front template files and so needs to be compiled 'on the fly'. Right now I have this function dynamically adding content:
$scope.layouts = [
{ id: 'Dashboard', icon: 'dashboard', view: '/qph/views/Dashboard.php' },
{ id: 'Customers', icon: 'people', view: '/qph/views/users.php' },
{ id: 'Quotes', icon: 'format_list_bulleted', view: '/qph/views/Quotes.php' }
];
$scope.workspace = {};
var getTemplate = function(id){
var view = 'test.php';
$timeout(function() { //added timeout
if($templateCache.get(view) === undefined) {
$templateRequest(view).then(function (data) {
$scope.workspaces.forEach(function (v) {
if (v.id == id) v.content = $compile(data)($scope);
});
});
} else {
$scope.workspaces.forEach(function (v) {
if (v.id == id) v.content = $compile($templateCache.get(view))($scope);
});
}
}, 2000);
};
$scope.workspaces =
[
{ id: 1, name: "Dashboard", icon: 'dashboard', active:true }
];
getTemplate(1);
I have checked that the data variable has the html content as expected, but the compile is outputting the following:
{"0":{"jQuery331075208394539601512":{"$scope":"$SCOPE","$ngControllerController":{}}},"length":1}
Does anyone know why its not compiling the html content as expected?
Here is the template content for reference:
<div class="col-sm-6 col-sm-offset-3" ng-controller="UserController">
<div class="col-sm-6 col-sm-offset-3">
<div class="well">
<h3>Users</h3>
<button class="btn btn-primary" style="margin-bottom: 10px" ng-click="user.getUsers()">Get Users!</button>
<ul class="list-group" ng-if="user.users">
<li class="list-group-item" ng-repeat="user in user.users">
<h4>{{user.name}}</h4>
<h5>{{user.email}}</h5>
</li>
</ul>
<div class="alert alert-danger" ng-if="user.error">
<strong>There was an error: </strong> {{user.error.error}}
<br>Please go back and login again
</div>
</div>
</div>
</div>
Here is the tabs view that is to display the compiled content:
<ul class="nav nav-tabs workspace-tabs">
<li class="nav-item" ng-repeat="space in workspaces">
<a class="nav-link" data-toggle="tab" href="#workspace{{space.id}}" ng-class="(space.active == true ) ? 'active show': ''">
<span class="hidden-sm-up"><i class="material-icons md-24">{{space.icon}}</i></span>
<span class="hidden-xs-down">{{space.name}}</span>
<button ng-click="workspace.remove($index)">x</button>
</a>
</li>
</ul>
<div class="tab-content workspace-content">
<div ng-repeat="space in workspaces" id="workspace{{space.id}}" class="tab-pane fade in" ng-class="(space.active == true ) ? 'active show': ''">
{{space.content}}
</div>
</div>

The $compile service creates a jqLite object that needs to be added to the DOM with a jqLite or jQuery append() method. Using interpolation {{ }} will only render the stringified value of the jqLite object.
<div class="tab-content workspace-content">
<div ng-repeat="space in workspaces" id="workspace{{space.id}}" class="tab-pane fade in" ng-class="(space.active == true ) ? 'active show': ''">
̶{̶{̶s̶p̶a̶c̶e̶.̶c̶o̶n̶t̶e̶n̶t̶}̶}̶
<compile html="space.html"></compile>
</div>
</div>
Instead, use a custom directive to compile and append the HTML data to the DOM:
app.directive("compile", function($compile) {
return {
link: postLink,
};
function postLink(scope, elem, attrs) {
var rawHTML = scope.$eval(attrs.html)
var linkFn = $compile(rawHTML);
var $html = linkFn(scope);
elem.append($html);
}
})
For more information, see AngularJS Developer Guide - HTML Compiler.

Use a directive.
app.directive('myCustomer', function() {
return {
templateUrl: 'test.php',
controller: 'UserController'
};
})
Template cache will be managed automatically.

ng-click - Change tab on submitting form

I have a mean stack application where there is a left panel for navigation. One of the tabs have a form, and after I submit the form, I call a function, which after successful completion has a $state.go('secured.dashboard'); which redirects it to another tab(dashboard). This works fine, but on the left panel the previous tab(application form tab) is still highlighted as active. Although, On clicking the tab, the active menu is highlighted correctly.
So, the problem is when I click submit, it redirects to a different tab(dashboard) but on the left-navigation panel, some other tab(application Form) is highlightened, although I change the variable $scope.selectedMenu = "dashboard";. I have added the relevant code snippets from files:
header-template.html
<nav class="navbar-default navbar-side" role="navigation" style="width:200px">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a id="page1" ng-class='{"active-menu": selectedMenu == "dashboard"}' ui-sref="secured.dashboard" ng-click='selectedMenu = "dashboard"'><i class="fa fa-dashboard "></i>Dashboard</a>
</li>
<li>
<a id="page2" ng-class='{"active-menu": selectedMenu == "applicationForm"}' ui-sref="secured.applicationForm" ng-click='selectedMenu = "applicationForm"'><i class="fa fa-handshake-o "></i>Application Forms</a>
</li>
<li>
<a id="page3" ng-class='{"active-menu": selectedMenu == "adminprofile"}' ui-sref="secured.adminprofile" ng-click='selectedMenu = "adminprofile"' ng-show="adminUserTrue"><i class="fa fa-user-secret"></i>Administrator</a>
</li>
<li>
<a id="page4" ng-class='{"active-menu": selectedMenu == "managerProfile"}' ui-sref="secured.managerProfile" ng-click='selectedMenu = "managerProfile"' ng-show="isManager"><i class="fa fa-user-secret"></i>Manager</a>
</li>
<li>
<a ng-class='{"active-menu": selectedMenu == "logout"}' href="" ng-click="logout()" ng-click='selectedMenu = "logout"'><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
</div>
</nav>
dashboard.js
(function() {
var app = angular.module('dashboard', []);
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('secured.dashboard', {
url: '/dashboard',
controller: 'DashboardController',
templateUrl: '/views/dashboard.html'
});
}]);
app.controller('DashboardController', ['$scope', 'AuthService', 'user', '$state', '$http', function($scope, AuthService, user, $state, $http) {
console.log("yes, the controller is here");
$scope.user = user;
AuthService.setUser(user);
$scope.applicationShow = {};
$scope.logout = function() {
AuthService.logout().then(function() {
$scope.user = null;
$state.go('unsecured');
})
}
applicationForm.js
(function() {
var app = angular.module('applicationForm', []);
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('secured.applicationForm', {
url: '/applicationForm',
controller: 'applicationFormController',
templateUrl: '/views/applicationForm.html',
params: {
obj: null
}
});
}]);
app.controller('applicationFormController', ['$http', '$scope', '$state', '$uibModal', function($http, $scope, $state, $uibModal) {
console.log($state.params.obj);
if ($state.params.obj == null) {
$scope.application = {
technical: false,
business: false
};
} else {
$scope.application = $state.params.obj;
}
console.log("I am finally the application");
console.log($scope.application);
$scope.submitApplication = function() {
$scope.submitted = true;
console.log("Submit called");
console.log($scope.application.title);
console.log($scope.user.email);
console.log("Yes, i am here!");
console.log($scope.application.userEmail);
$scope.application.state = "SUBMITTED";
$scope.application.heirarchy = $scope.managerjson[$scope.application.managerName].senior;
console.log($scope.application.heirarchy);
var check = 0;
$http.get('/application/applicationlistNum/').then(function(response) {
$scope.application.number = response.data.value.sequence_value;
console.log($scope.application.number);
for (var i = 0, len = $scope.applicationList.length; i < len; i++) {
if ($scope.applicationList[i]._id == $scope.application._id) {
check = 1;
console.log("matched");
break;
}
}
if (check == 1) {
$http.put('/application/applicationlist/' + $scope.application._id, $scope.application).then(function(response) {
refresh();
});
} else {
$http.post('/application/applicationList', $scope.application).then(function(response) {
console.log("Successfully submitted");
refresh();
});
}
swal({
title: "Great!",
text: "We have received your request",
type: "success",
timer: 3000,
confirmButtonText: "Wohoo!"
});
var contactInfo = {
managerEmail: $scope.application.managerName,
selfEmail: $scope.application.userEmail,
name: $scope.managerjson[$scope.application.managerName].name
};
clear();
sendMail(contactInfo);
console.log("changing states");
$scope.selectedMenu = "dashboard";
$state.go('secured.dashboard');
});
};
applicationForm.html
<div class="col-lg-12">
<form class="well form-horizontal" id="contact_form" ng-submit="submitApplication()" name="form">
<fieldset>
<!-- some more fields -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-2">
<button type="submit" class="btn btn-primary"> Submit <span class="glyphicon glyphicon-send"></span></button>
<!-- <button class="btn btn-primary" ng-click="submitApplication()"> Submit <span class="glyphicon glyphicon-send"></span></button> -->
</div>
<div>
<button class="btn btn-warning" ng-click="saveApplication()"> Save <span class="glyphicon glyphicon-floppy-disk"></span></button>
</div>
</div>
</fieldset>
</form>

In applicationForm.js change $scope.selectedMenue = 'dashboard' to
$scope.selectedMenu = {name : "dashboard"};
And in your header template
<ul class="nav" id="main-menu">
<li>
<a id="page1" ng-class='{"active-menu": selectedMenu.name == "dashboard"}' ui-sref="secured.dashboard" ng-click='selectedMenu.name= "dashboard"'><i class="fa fa-dashboard "></i>Dashboard</a>
</li>
<li>
<a id="page2" ng-class='{"active-menu": selectedMenu.name== "applicationForm"}' ui-sref="secured.applicationForm" ng-click='selectedMenu.name= "applicationForm"'><i class="fa fa-handshake-o "></i>Application Forms</a>
</li>
<li>
<a id="page3" ng-class='{"active-menu": selectedMenu.name== "adminprofile"}' ui-sref="secured.adminprofile" ng-click='selectedMenu.name= "adminprofile"' ng-show="adminUserTrue"><i class="fa fa-user-secret"></i>Administrator</a>
</li>
<li>
<a id="page4" ng-class='{"active-menu": selectedMenu.name== "managerProfile"}' ui-sref="secured.managerProfile" ng-click='selectedMenu.name= "managerProfile"' ng-show="isManager"><i class="fa fa-user-secret"></i>Manager</a>
</li>
<li>
<a ng-class='{"active-menu": selectedMenu.name== "logout"}' href="" ng-click="logout()" ng-click='selectedMenu.name= "logout"'><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>

Make template visible on click of link function in Angular directive

Probably the question is not phrased correctly . But here is what I am trying to do .
I have a navbar defined with countries array that contains the countries' names and coordinates.
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to the world of directives!</a>
</div>
<ul class="nav navbar-nav">
<li ng-repeat="countryTab in countries" ng-click="itemClicked(countryTab.label)" style="cursor:pointer">
<a>{{countryTab.label}}</a>
<country-tab-bar country="selectedCountry"></country-tab-bar>
</li>
</ul>
</div>
</nav>
<script>
var app = angular.module('app',[]);
app.controller('appCtrl',function($scope){
$scope.countries = [{
id: 1,
label: 'Italy',
coords: '41.29246,12.5736108'
}, {
id: 2,
label: 'Japan',
coords: '37.4900318,136.4664008'
}, {
id: 3,
label: 'USA',
coords: '37.6,-95.665'
}, {
id: 4,
label: 'India',
coords: '20.5937,78.9629'
}];
});
</script>
Now country-tab-bar is the directive that has the template that shows the name and the map using the coordinates defined in the array.
I tried
app.directive('countryTabBar',function(){
return {
restrict: 'E',
scope:{
country: '='
},
template: '<div>'+
' <div>Italy</div>'+
' <br/>'+
' <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+
'</div>',
link : function(scope,elem,attrs){
scope.itemClicked = function(value){
scope.selectedCountry = value;
}
}
}
});
But nothing happens on click of the country names.
UI for now is screwed up.
What needs to be done to fix the same?
Please suggest .
The map should only appear after clicking a name, not before.

Some minor changes in your code and it is working. See the comments below.
WORKING FIDDLE
//HTML
<div ng-app="app">
<div ng-controller='appCtrl'>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to the world of directives!</a>
</div>
<ul class="nav navbar-nav">
<!-- pass country to itemClicked function defined into controller -->
<li ng-repeat="country in countries" ng-click="itemClicked(country)" style="cursor:pointer">
<a>{{country.label}}</a>
</li>
<!-- directive moved outside the ng-repeat -->
<country-tab-bar country="selectedCountry"></country-tab-bar>
</ul>
</div>
</nav>
<div>
</div>
//app
var app = angular.module('app',[]);
//controller
app.controller('appCtrl',function($scope){
$scope.countries = [{
id: 1,
label: 'Italy',
coords: '41.29246,12.5736108'
}, {
id: 2,
label: 'Japan',
coords: '37.4900318,136.4664008'
}, {
id: 3,
label: 'USA',
coords: '37.6,-95.665'
}, {
id: 4,
label: 'India',
coords: '20.5937,78.9629'
}];
// function to select the country (receive de full object as parameter)
$scope.itemClicked = function(selected){
// set the object needed by the directive
$scope.selectedCountry = selected
}
});
//directive
app.directive('countryTabBar',function(){
return {
restrict: 'E',
scope:{
country: '='
},
template: '<div>'+
' <br/>'+
' <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+
'</div>',
link : function(scope,elem,attrs){
}
}
});

Inside
Where is "selectedCountry" defined
I think what you are trying to do is this:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to the world of directives!</a>
</div>
<ul class="nav navbar-nav">
<li ng-repeat="countryTab in countries" ng-click="countryTab.showProperty = !countryTab.showProperty" style="cursor:pointer">
<a>{{countryTab.label}}</a>
<country-tab-bar country="countryTab" ng-show="countryTab.showProperty"></country-tab-bar>
</li>
</ul>
</div>
</nav>
<script>
var app = angular.module('app',[]);
app.controller('appCtrl',function($scope){
$scope.countries = [{
id: 1,
label: 'Italy',
coords: '41.29246,12.5736108',
showProperty: false
}, {
id: 2,
label: 'Japan',
coords: '37.4900318,136.4664008',
showProperty: false
}, {
id: 3,
label: 'USA',
coords: '37.6,-95.665',
showProperty: false
}, {
id: 4,
label: 'India',
coords: '20.5937,78.9629',
showProperty: false
}];
});
</script>
app.directive('countryTabBar',function(){
return {
restrict: 'E',
scope:{
country: '='
},
template: '<div>'+
' <div>Italy</div>'+
' <br/>'+
' <img ng-src="https://maps.googleapis.com/maps/api/staticmap?center={{country.coords}}&zoom=4&size=800x200"> '+
'</div>'
}
});
Simply hide all country-tab-bar elements using ng-show directive which uses new property that if its true the tab is shown if its false its hidden.
the ng-click is assigned to the li element which includes both the button to click and the country-tab-bar itself. If you want to close it only on the button click move the ng-click directive inside the <a> element

My li scope not remove in angular js Why?

Hi Please Help me i m new in angular js
i just create a function.
i m repeat the content .
i create a function who is add next tab section and remove this section.
i create a same function to another tab add prev tab section and remove this section .
But i thing only data copy this function not remove data and not show .
Please Help me
My code is this
HTML Code is
<body ng-app="taskPanel">
<div class="" ng-controller="TasksController">
<tabset panel-tabs="true" panel-class="panel-inverse">
<tab>
<tab>
<tab-heading> <span class="hidden-xs">ACTIVE</span> <span class="badge badge-primary">{{tasksComplete.length}}</span></tab-heading>
<div class="tasklist">
<ol class="panel-tasks">
<li ng-repeat="item in tasksComplete">
<a href="#" class="preview-question">
<i class="fa fa-eye">eye</i>
</a>
<label>
<span class="task-description">{{item.title}}</span>
<span class="label label-{{item.color || 'primary'}}" ng-show="item.label">{{item.label}}</span>
<div class="more-icn">
<div class="pull-left">
<button class="active-check" ng-click="pushActive(this, item)">Push to InActive Tab</button>
</div>
</div>
</label>
</li>
</ol>
</div>
</tab>
<tab>
<tab-heading> <span class="hidden-xs">InACTIVE</span> <span class="badge badge-primary">{{tasksComplete.length}}</span></tab-heading>
<div class="tasklist">
<ol class="panel-tasks">
<li ng-repeat="item in tasksInComplete">
<a href="#" class="preview-question">
<i class="fa fa-eye"></i>
</a>
<label>
<span class="task-description">{{item.title}}</span>
<span class="label label-{{item.color || 'primary'}}" ng-show="item.label">{{item.label}}</span>
<div class="more-icn">
<div class="pull-left">
<button class="active-check" ng-click="pushInActive(this, item)">Push To Active Tab</button>
</div>
</div>
</label>
</li>
</ol>
</div>
</tab>
</tabset>
</div>
</body>
ANgular Js code is
// Code goes here
var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
$scope.tasksComplete = [
{ title: "I m first" },
{ title: "I m Second" },
{ title: "I m thrid" }
];
$scope.tasksInComplete = [
{title: "i m incompletred 1"},
{title: "i m incompletred 2"},
{title: "i m incompletred 3"}
];
$scope.remove = function(scope){
scope.remove();
};
$scope.pushActive = function(scope, item){
$scope.tasksInComplete.push(item);
scope.remove();
};
$scope.pushInActive = function(scope, item){
$scope.tasksComplete.push(item);
scope.remove();
};
}]);
and Live Demo

you can use such approatch:
Controller:
$scope.tasksComplete = [
{ title: "I m first"},
{ title: "I m Second"},
{ title: "I m thrid"}
];
$scope.pushActive = function(item) {
$scope.tasksComplete.splice(item,1);
};
veiw
ng-click="pushActive($index)"

try this, use $index for remove elements in array
$scope.pushActive = function(index, item){
$scope.tasksComplete.splice(index, 1);
$scope.tasksInComplete.push(item);
};
$scope.pushInActive = function(index, item){
$scope.tasksInComplete.splice(index, 1);
$scope.tasksComplete.push(item);
};
plunker
http://plnkr.co/edit/fp3gcf9PlBi9XnpNYFZQ?p=preview

I fixed your code and you can see it here.
The wording was messing me up. Once I change the View wording to match the controller wording, it was good.
var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
$scope.tasksInActive = [
{ title: "I m first" },
{ title: "I m Second" },
{ title: "I m thrid" }
];
$scope.tasksActive = [
{title: "i m incompletred 1"},
{title: "i m incompletred 2"},
{title: "i m incompletred 3"}
];
$scope.pushActive = function(scope, item){
$scope.tasksInActive = removeItemFromList(item, $scope.tasksInActive);
$scope.tasksActive.push(item);
};
$scope.pushInActive = function(scope, item){
$scope.tasksActive = removeItemFromList(item, $scope.tasksActive);
$scope.tasksInActive.push(item);
};
function removeItemFromList(item, list){
return list.filter(function(i){
return i != item;
});
}
}]);