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/
Related
im having trouble with the js in this code. I have 2 clickble dropdowns, but only one of them (the first dropdown) is working. I dont know how to fix it.
here's the html part:
<div id="wrap">
<nav>
<div class="logo">
<img src="./photos-docs/ME-marine-logo.png" alt="logo" class="logo" />
</div>
<button type="button" class="btn-hamburger" data-action="nav-toggle">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu">
<li class="nav-item">עמוד ראשי</li>
<li class="nav-item dropdown">
עיסויים
<div class="dropdown-menu">
<a class="dropdown-item" href="#">רפואי</a>
<a class="dropdown-item" href="#">שוודי</a>
<a class="dropdown-item" href="#">רקמות עמוקות</a>
<a class="dropdown-item" href="#">ניקוז לימפטי</a>
<a class="dropdown-item" href="#">אבנים חמות</a>
</div>
</li>
<li class="nav-item dropdown">
טיפולי פנים
<div class="dropdown-menu">
<a class="dropdown-item" href="#">קלאסי</a>
<a class="dropdown-item" href="#">יופי</a>
<a class="dropdown-item" href="#">אקנה</a>
<a class="dropdown-item" href="#">פילינג</a>
<a class="dropdown-item" href="#">מיצוק</a>
<a class="dropdown-item" href="#">פיגמנטציה</a>
<a class="dropdown-item" href="#">אנטי אייג׳ינג</a>
</div>
</li>
<li class="nav-item">מזותרפיה</li>
<li class="nav-item">מיקרובליידינג</li>
<li class="nav-item">הזמינו תור</li>
<li class="nav-item">צרו קשר</li>
<li class="nav-item"></li>
<li class="nav-item"><i class="fa-brands fa-whatsapp"></i>
</li>
and here's the js part:
let nav = document.querySelector('nav');
let dropdown = nav.querySelector('.dropdown');
let dropdownToggle = nav.querySelector("[data-action='dropdown-toggle']");
let navToggle = nav.querySelector("[data-action='nav-toggle']");
dropdownToggle.addEventListener('click', () => {
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
} else {
dropdown.classList.add('show');
}
})
navToggle.addEventListener('click', () => {
if (nav.classList.contains('opened')) {
nav.classList.remove('opened');
} else {
nav.classList.add('opened');
}
})
what should I do from here? I know the problem ia in the js but I dont know how to keep going from here, im stuck.
In your code, you are using the querySelector method to select a single .dropdown element, which is why only the first dropdown is working.
You need to use the querySelectorAll method instead, which will return a list of all elements that match the given selector. You can then loop through this list and add the click event listener to each dropdown menu.
let nav = document.querySelector('nav');
let dropdowns = nav.querySelectorAll('.dropdown');
let dropdownToggles = nav.querySelectorAll("[data-action='dropdown-toggle']");
let navToggle = nav.querySelector("[data-action='nav-toggle']");
dropdownToggles.forEach(function(toggle, index) {
toggle.addEventListener('click', function() {
let dropdown = dropdowns[index];
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
} else {
dropdown.classList.add('show');
}
});
});
navToggle.addEventListener('click', () => {
if (nav.classList.contains('opened')) {
nav.classList.remove('opened');
} else {
nav.classList.add('opened');
}
});
Problem is here
let dropdown = nav.querySelector('.dropdown');
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
querySelector() returns only first element that matches the specified selector!
Thats why only one dropdown works.
You should use
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
And loop through every element to add event listener to them - just like you did in your code.
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.
I'm trying to toggle class "category-active" to an active category tab using ng-class and ng-click. Nothing seems to happen when I click the tabs. Not sure what I'm doing wrong. Please help.
HTML:
<body ng-app="app">
<div class="wrap" ng-controller="ctrl">
<h1>Bakery Menu</h1>
<div class="content">
<div class="categories">
<ul>
<li ng-class="{'category-active' : active}">
All
</li>
<li ng-class="{'category-active' : active}" ng-repeat="menu in menus">
<a href="" ng-repeat="(key,val) in menu" href="" ng-click="active = !active; categoryList(key)">{{menus}}
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
JS:
angular.module('bakeryMenuApp')
.controller('mainCtrl', function($scope, dataService) {
dataService.getMenus(function(response) {
$scope.menus = response.data.menus;
$scope.category = 'all';
$scope.categoryList = function(value) {
$scope.category = value;
}
});
})
JSON:
{
"menus":[
{
"brownies":[
{
"name":"Baker's Choice Bars Assortment",
"price":"45",
"description":"A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
"image_url":"https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
},
{
"cakes":[
{
"name":"Raseberry Lemon Cake",
"price":"50",
"description":"Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
"image_url":"http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
}
]
}
I think it had to do with ng-repeat and scope. I changed the scope and used directive to solve it.
<ul>
<li ng-init="selected === 'all'" ng-class="{'category-active':selected==='all'}">
<a sibling href="" ng-click="selected = 'all'; categoryList('all')">All</a>
</li>
<li ng-init="active = false" ng-repeat="menu in menus">
<a sibling href="" ng-repeat="(key,val) in menu" href="" ng-click="categoryList(key)">{{key}}
</a>
</li>
</ul>
JS:
angular.module('bakeryMenuApp')
.directive('sibling', function () {
return {
link: function(scope, element, attrs) {
element.bind('click', function() {
element.parent().parent().children().removeClass('category-active');
element.parent().addClass('category-active');
})
},
}
});
You logic seems wrong. Try this:
<li ng-class="{'category-active':selected==='all'}">
All
</li>
<li ng-class="{'category-active':selected===menu}" ng-repeat="menu in menus">
<a href="" ng-repeat="(key,val) in menu" href="" ng-click="selected=menu; categoryList(key)">{{menus}}
</a>
</li>
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>
I am trying to dynamically change the data-id of anchor #a-flop. The issue is that the data-id is only changed once. I am unable to change the dynamically updated value.
HTML
<ul class="nav navbar-nav navbar-center">
<li class="dropdown">
<a id="a-flip" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-file-text m-r-10"></i>
Invoice
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a id="a-flop" data-id="1" href="javascript:void(0)">
<i class="fa fa-user m-r-10"></i>
Badge
</a>
</li>
</ul>
</li>
</ul>
JQUERY
<script>
$(document).ready(function(){
$(document).on('click', '#a-flop', function(){
$this = $(this);
alert($this.data('id'));
if ($this.data('id') == 0) {
$this.attr('data-id', 1);
} else {
$this.attr('data-id', 0);
}
});
});
</script>
FIDDLE LINK - http://jsfiddle.net/Lv37o8wu/
That is because you are setting the attribute value and not dom property. you should be using .data() to set the value as well:
$(document).on('click', '#a-flop', function(){
$this = $(this);
alert($this.data('id'));
if ($this.data('id') == 0) {
$this.data('id', 1);
} else {
$this.data('id', 0);
}
});
Working Demo