I have the logout button like this:
<li class="dropdown" data-ng-if="userName">
<a href class="dropdown-toggle clear" data-toggle="dropdown" data-ng-show="userName">
</a>
<!-- dropdown -->
<ul class="dropdown-menu>
<li ng-hide="fb_id">
<a ui-sref="app.changePassword">Change Password</a>
</li>
<li>
<a ui-sref="app.changeProfilePic">Change Profile Picture</a>
</li>
<li data-ng-show="userName">
<a ui-sref="access.signout" data-ng-if="userName">Logout</a>
</li>
</ul>
<!-- / dropdown -->
</li>
And in the controller:
$scope.logIn = function (user) {
$scope.myPromise = AuthService.login({
'uid': user.email,
'password': user.password,
}).then(function (response) {
$localStorage.userName = response.userName;
$scope.userName = $localStorage.userName;
}, function (error) {
$scope.authError = true;
});
};
Sign out controller:
$scope.userName = "";
delete $localStorage.userName;
$rootScope.userName = "";
Doesn't matter I use ng-if or ng-show it is still showing the logout button and the dropdown.
Try with the below code.
<a ui-sref="access.signout" data-ng-if="userName != ''">Logout</a>
This should do
<li data-ng-show="userName !== ''">
<a ui-sref="access.signout">Logout</a>
</li>
Related
I am learning VueJs but I kinda confused about v-bind! I have 4 buttons I want to have active class in the specific button when I click on that button but when I clicked on the button it looks like the method was not called! Example, If i click on home button the home button will have active class which will be changed to red. If i click on watch button the home button goes back to black and the watch button will be changed to red. But when I clicked on watch button everthing went to black. How can I fix it? Sorry for my english.
here is my vue.js file
new Vue({
el: "#center-element",
data: {
homeActive: true,
watchActive: false,
groupActive: false,
gameActive: false,
},
methods: {
homeActiveMethod: function () {
this.homeActive = true;
this.watchActive = false;
this.groupActive = false;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = true;
this.groupActive = false;
this.gameActive = false;
},
groupActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = true;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = false;
this.gameActive = true;
},
},
});
html
<ul class="navbar-nav nav nav-tabs mx-auto text-center" id="center-element">
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button v-on:click="homeActiveMethod" class="btn" v-bind:class="{active: homeActive}"
id="center-btn-nav">
<i class="fas fa-home"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button v-on:click="watchActiveMethod" class="btn" v-bind:class="{active: watchActive}"
id="center-btn-nav">
<i class="fas fa-play"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button class="btn" id="center-btn-nav">
<i class="fas fa-users"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button class="btn" id="center-btn-nav">
<i class="fas fa-gamepad"></i>
</button>
</a>
</li>
</ul>
css
.active{
color: red;
border-bottom: 5px;
border-bottom-style:solid;
border-bottom-color: red;
}
In Vue, you do not need to use <a> tags. Remove them and it will probably work.
By the way, you could significantly reduce the amount of code in your Vue component by using a single variable for currently active link:
data: {
activeLink: ""
},
methods: {
setActiveLink(activeLink) {
this.activeLink = activeLink;
}
},
<button v-on:click="setActiveLink('home')" class="btn" v-bind:class="{active: activeLink === 'home'}" id="center-btn-nav">
I would also suggest generating your <li> tags using a v-for directive.
Header contorller
mapsModule = angular.module('maps-module');
mapsModule.controller('psHeaderCtrl', function($scope, $rootScope, MESSAGES,
psHttpSrvc){
$scope.addAlertPin = function(){
console.log('broadcast event');
$scope.$broadcast('event1', { data: 'asdasdasasda'});
}
});
Map contorller
map = angular.module('maps-module');
map.controller('map_controller',function
($scope,$rootScope,$timeout) {
$scope.$on('event1', function(event, args){
console.log('asdasdasd');
});
});
Header.html
<div ng-controller="psHeaderCtrl">
<ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
<li class="nav-item" id="plus">
<a class="nav-link" data-toggle="" href="javascript:void(0)"
title="plus" ng-click="addAlertPin()">
<i class="icon wb-plus" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
All files are included. Angular is working fine but broadcast events are not received.
Try using $rootScope to broadcast event:
$scope.addAlertPin = function(){
console.log('broadcast event');
$rootScope.$broadcast('event1', { data: 'asdasdasasda'});
}
How can I dynamically update this dropdown, so that by clicking another button, through ng-click () I can change and update to the <li><a data-action="100">100</a>
<ul class="dropdown-menu pull-right" role="menu">
<li aria-selected="true" class="active">
<a data-action="10" class="dropdown-item dropdown-item-button">10</a>
</li>
<li aria-selected="false">
<a data-action="25" class="dropdown-item dropdown-item-button">25</a>
</li>
<li aria-selected="false">
<a data-action="50" class="dropdown-item dropdown-item-button">50</a>
</li>
<li aria-selected="false">
<a data-action="100" class="dropdown-item dropdown-item-button">100</a>
</li>
</ul>
You can create a collection of objects in your controller and manipulate them with functions.
<div ng-app ng-controller="ddlController">
<ul class="dropdown-menu pull-right" role="menu">
<li ng-repeat="option in options" aria-selected="isSelected(option)" ng-class="{'active': isSelected(option)}">
<a data-action="{{option.action}}" class="dropdown-item dropdown-item-button" ng-click="select(option)">{{option.action}}"</a>
</li>
</ul>
<button ng-click="select100()">Select 100</button>
</div>
Controller:
function ddlController($scope) {
$scope.options = [{
action: 10
}, {
action: 25
}, {
action: 50
}, {
action: 100
}];
$scope.selected = $scope.options[0];
$scope.isSelected = function(option) {
if (option.action === $scope.selected.action) {
return true;
}
return false;
};
$scope.select = function(option) {
$scope.selected = option;
};
$scope.select100 = function() {
$scope.selected = $scope.options.find(o => o.action === 100);
};
}
or check this fiddle:
https://jsfiddle.net/VictorSDK/40wdtavp/
I have an issue with my child menus.When I click a child menu it becomes active after http request but I want it to remain expanded after http request(page refresh).Menu structure is below.
<ul class="sidebar-navigation>
#foreach($parent as $parent)
<li>{{$parent->name}}
<ul>
#foreach($child as $child)
#if(isset($_GET['name']) && $_GET['name'] == $child->name)
<li class="active">
#endif
{{$child>name)}}
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
Here is an idea, and it's what i do to acheieve this effects. i use AdminLTE, you should base this code to change your code, Basic idea is judge current route if route need open sidebar then give a class 'active'
to html tag.
Html:
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu">
<li class="treeview {{ sidebar_open(['admin.roles.*']) }}">
<a href="#">
<i class="fa fa-user-secret"></i>
<span>角色管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>角色列表</li>
<li><i class="fa fa-circle-o"></i>新建角色</li>
</ul>
</li>
</ul>
define a helper functions:
<?php
if (!function_exists('sidebar_open')) {
function sidebar_open($routes = []) {
$currRoute = Route::currentRouteName();
$open = false;
foreach ($routes as $route) {
if (str_contains($route, '*')) {
if (str_contains($currRoute, substr($route, '-1'))) {
$open = true;
break;
}
} else {
if ($currRoute === $route) {
$open = true;
break;
}
}
}
return $open ? 'active' : '';
}
}
I have a series of fieldset elements that are hidden when all of the list items inside them are not visible. The problem is I want to actually remove the field sets after they slide up and are hidden but I'm having trouble getting that to work.
$(document).ready(function () {
$('body').on("click", ".readBtn", function (e) {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterid).slideUp(function () {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// Hide `fieldset`
var parent = $(this).closest("fieldset");
parent.slideUp();
parent.remove();
}
});
});
});
button.readBtn {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 1
</a>
</legend>
<ul>
<li class="chapter" id="chapter_9">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_9">
Mark as Read
</button>
</li>
</ul>
</fieldset>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 2
</a>
</legend>
<ul>
<li class="chapter" id="chapter_10">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_10">
Mark as Read
</button>
</li>
<li class="chapter" id="chapter_12">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_12">
Mark as Read
</button>
</li>
</ul>
</fieldset>
I've read that you can't use the jquery.click call in order to remove an element that was created after page load, so that's why I went with using the on call. But I'm having trouble getting it to work.
Try
$(document).ready(function () {
$('.readBtn').click(function () {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterID).slideUp(function() {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// hide `fieldset`
// remove `fieldset` if all `li` siblings _not_ visible ,
// at `.hide()` `complete` callback
$(this).closest("fieldset").hide(function() {
$(this).remove()
})
}
});
});
});
$(document).ready(function () {
$('.readBtn').click(function () {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterID).slideUp(function() {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// hide `fieldset`
$(this).closest("fieldset").hide(function() {
$(this).remove()
})
}
});
});
})
button.readBtn {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 1
</a>
</legend>
<ul>
<li class="chapter" id="chapter_9">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_9">
Mark as Read
</button>
</li>
</ul>
</fieldset>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 2
</a>
</legend>
<ul>
<li class="chapter" id="chapter_10">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_10">
Mark as Read
</button>
</li>
<li class="chapter" id="chapter_12">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_12">
Mark as Read
</button>
</li>
</ul>
</fieldset>
This is what I would do:
$(document).ready(function () {
$('body').on("click", ".readBtn", function (e) {
liEl = $(e.currentTarget).parent();
var chapterID = $(e.currentTarget).attr('id').split('_').pop();
$('#chapter_'+chapterID).slideUp(function () {
if (!liEl.is(":visible")
&& !liEl.siblings(":visible").length > 0) {
// Hide `fieldset`
var parent = liEl.closest("fieldset");
parent.slideUp();
parent.remove();
}
});
});
});
http://jsfiddle.net/jplato/zp91wzc0/1/