When we click on Menu item list, it routes to login page:
How can i solve this problem?
This my sidemenu-template:
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-
submenu " data-keep-expanded="false" data-auto-scroll="true" data-
[enter image description here][1]slide-speed="200">
<li class="nav-item" data-ng-repeat="menu in sideBarCntrl.menuList">
<a href="#/{{menu.menuUrl}}" class="nav-link nav-toggle">
<i class="{{menu.menuIcon}}"></i>
<span class="title"> {{menu.menuDisplayName}}</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item" data-ng-repeat="childmenu in menu.childMenuItems">
<a href="#{{childmenu.menuUrl}}" class="nav-link ">
<span class="title">{{childmenu.menuDisplayName}}</span>
</a>
</li>
</ul>
</li>
</ul>
This is my sidemenu- main list directive calling Api Using ASP.Net:
sideBarCntrl.getMenuList = function() {
user.allowWeb = true;
dashboardService.getMenuList(user).then(function(response) {
//console.log(response.data);
sideBarCntrl.menuList = response.data;
angular.forEach(sideBarCntrl.menuList, function(value, key) {
if ($state.current.url == ('/' + value.menuUrl)) {
value.isActive = true;
}
})
}, function(error) {
if (error.data.message) {
toastr.error(error.data.message);
}
});
}
I would recommend using ng-href instead of href in your case. This way you are sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.
Related
How can I get the selected value from below dropdown.?
<ul class="nav-drop-menu" id="ddlHotelSort">
<li class="liselect" value="{{ssort.Sort}}" ng-repeat="ssort in vm.searchsort">
<a href="javascript:void(0)" class="SortClass" name="Sortclass" style="left:0px" value="{{ssort.Sort}}">{{ssort.Name}}
</a>
</li>
</ul>
Below is image of dropdown opening..
How can I handle event and model value in angular application..?
<ul class="nav-drop-menu" id="ddlHotelSort">
<li class="liselect" ng-click="getSelectedItem(ssort);" value="{{ssort.Sort}}" ng-repeat="ssort in vm.searchsort">
<a href="javascript:void(0)" class="SortClass" name="Sortclass" style="left:0px" value="{{ssort.Sort}}">{{ssort.Name}}
</a>
</li>
</ul>
controller function
$scope.getSelectedItem = function(item){
console.log(item);//selected item
}
Just call a function in the li click, here is an example with your options.
Just click on each li,
var app=angular.module('myApp',[])
app.controller('MyCtrl',MyCtrl)
function MyCtrl($scope) {
$scope.opts = ["Recommended","FirstClass","SecondClass","ThirdClass" ];
$scope.my_method = function(opt)
{
alert(opt)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat=" opt in opts" ng-click="my_method(opt)">
{{ opt }}
</li>
</ul>
<p>{{opt}}</p>
</div>
Run the code snippet and click on each li
HEre is an example fiddle with your options
controller.js
$scope.getElectInfo=function(){
var selectedVal = $("#countriesList option:selected").val();
if (selectedVal != 0) {
$.get(APP_URL+ "/political/ElectionType/GetElectionTypesByCountry?countryId="
+ selectedVal,
function(data, status) {
$scope.data1=data;
console.log($scope.data1);
});
$scope.Structure = true;
}else
{
$scope.Structure = false;
}
}
html
<select id="countriesList" ng-change="getElectInfo()" ng-model="getElectionInfo">
</select>
<div ng-show="Structure" class="content">
<figure class="org-chart cf">
<ul class="administration">
<li>
<ul class="director">
<li>
<ul class="subdirector">
</ul>
<ul class="departments cf">
<li><a ><span ng-repeat="cname in country">{{cname.countryName}}</span></a></li>
<li class="department dep-b" ng-repeat="types in data1">
<a ><span>{{types.name}}</span></a>
</li>
In the above controller.js i am getting the country wise election types data,in the html page when i select the country for the first time $scope.data1 is not updating in view,select second time its updating can any one help me what is the problem!
finally i got it,
need to place $scope.$apply(); in function(data, status) { }
i want to create bootstrap dropdown without using jquery
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
please help how to do this
Rememebr adding ui-bootstrap directive to angular.module
Html Code
<ul uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
<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>
Js Code
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long- content'));
});
I wrote my Dropdown menu script No Jquery No Bootstrap js, only bootstrap css which is easy to override anyway:
document.addEventListener('DOMContentLoaded', function () {
// -----Dropdown----------
// Rule: link.dropdown-link data-dropdown='dropdownIdentifier' div#dropdownIdentifier
let dropdowns = document.querySelectorAll('.dropdown-link');
for (dropdown of dropdowns) {
dropdown.onclick = function (e) {
let dropdownDiv = document.getElementById(dropdown.getAttribute('data-dropdown'))
if (dropdownDiv.style.display == "block") {
dropdownDiv.style.display = "none";
} else {
dropdownDiv.style.display = "block";
}
}
}
});
Now in html:
<a class="dropdown-link" data-dropdown="dropdownId">Prodbox</a>
<div id="dropdownId" class="dropdown-menu">
1
2
3
</div>
Note that dropdown-menu is bootstrap class to style it, you can write your own if you are not using bootstrap css
I have use toggle menu from simple toggle .but my problem that when we click on specific menu then all other menu should be close like as accordion menu.
Directive :
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
when click on slide above code will execute.i need some logic like close all toggle which class name slidable_content
My Code is here : Plunker
#Michael is right, you can use the two way data binding to do that easily
<section>
<ul>
<li>
<span ng-click="isExpanded = ! isExpanded">Show 1</span>
</li>
<li ng-show="isExpanded" slider id="test2">
<p>Are to hide and show adf</p>
</li>
</ul>
</section>
So, you can control the state of the other menus if you want
UPDATE:
Try this:
<section>
<ul>
<li slider-toggle ng-click="expandItem = 1">Slider 1</li>
<li ng-if="expandItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 2">Slider 2</li>
<li ng-if="expandItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 3">Slider 3</li>
<li ng-if="expandItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 4">Slider 4</li>
<li ng-if="expandItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
In this way you can create an accordion menu, just getting the value of the element that you want to show and validating it with the ng-if directive (you can use ng-show if you want, you can find the difference here: docs.angularjs.org/api/ng/directive)
Note:
You shouldn't get elements of the DOM with jquery or javascript selectors, if you want to control an element of the DOM you can use a directive, as an example:
script.js:
.directive('someDirective',function(){
return{
restrict:'A',
scope:true,
templateUrl:'someTemplate.html',
link: function(scope, element, attrs){
console.log(element) //This will be your element
}
}
})
main.html:
<li some-directive ng-click="expandItem = 4">Slider 4</li>
UPDATE
If you want to close the current open item, you can control the open/close state with a function.
Try this:
main.html
<body ng-app="myApp">
<section ng-controller="myCtrl">
<ul>
<li slider-toggle ng-click="setCurrentItem(1)">Slider 1</li>
<li ng-show="currentItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(2)">Slider 2</li>
<li ng-show="currentItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(3)">Slider 3</li>
<li ng-show="currentItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(4)">Slider 4</li>
<li ng-show="currentItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
</body>
app.js
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", ["$scope", function ($scope) {
$scope.currentItem = null;
$scope.setCurrentItem = function (itemId) {
if(itemId == $scope.currentItem){
$scope.currentItem = null;
}else{
$scope.currentItem = itemId;
}
}
}])
I wanna see a div when I put the mouse over an image and remove it if I leave the mouse, with the ng-mouseenter and ng-mouseleave. But when I load my page, in the div appear class="ng-hide".
My code:
<nav class="navbar-default navbar-side" role="navigation" ng-app="panel" ng-controller="panelController">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li class="text-center">
<img ng-mouseenter="inProfile()" ng-mouseleave="outProfile()" src="{{ asset('image/id1.jpg') }}" class="user-image img-responsive"/>
<div ng-show="panelController.evento">
Hi!!
</div>
</li>
<li>
<i class="fa fa-dashboard fa-3x"></i><span class="text-20">Dashboard</span></a>
</li>
<li>
<i class="fa fa-users fa-3x"></i><span class="text-20">Usuarios</span>
</li>
<li>
<i class="fa fa-lightbulb-o fa-3x padding-left-10"></i><span class="text-20 padding-left-10">Emprendedores</span></a>
</li>
<li>
<i class="fa fa-money fa-3x"></i><span class="text-20">Inversores</span></a>
</li>
<li>
<i class="fa fa-newspaper-o fa-3x"></i><span class="text-20">Noticias</span></a>
</li>
</ul>
</div>
</nav>
<script>
var tfc = angular.module('panel', []);
tfc.controller ( 'panelController' , [ '$scope' , function($scope){
$scope.inProfile = function(){
$scope.evento = "true";
}
$scope.outProfile = function(){
$scope.evento = "false";
}
}])
</script>
You problem is on page load eventto value is undefined that's why ng-show expression is hiding value on page load. you should define evento value to true to show it. You could this do from controller or also you could use ng-init="panelController.evento=true" on view
And make sure, you should use boolean rather than string which is used for expression evaluation in ng-show.
Code
var tfc = angular.module('panel', []);
tfc.controller('panelController', ['$scope', function($scope) {
$scope.inProfile = function() {
$scope.evento = true;
}
$scope.outProfile = function() {
$scope.evento = false;
}
//init values
$scope.evento = true;
}]);
Update
You should directly access value of scope variable on view as you are not using controllerAs in you application, it should be evento instead of panelController.evento
Markup
<div ng-show="evento">
Hi!!
</div>