In angular.js how can I toggle a css class active on and off on click of the element? I know I can use ng-class and ng-click but how do I reference itself? For example, let's say I have three buttons:
<a class="btn" ng-click="" ng-class"">First</a>
<a class="btn" ng-click="" ng-class"">Second</a>
<a class="btn" ng-click="" ng-class"">Third</a>
<a ng-click="firstActive = !firstActive" ng-class"{'btn':true, 'active':firstActive}">First</a>
<a ng-click="secondActive = !firstActive" ng-class"{'btn':true, 'active':secondActive}">Second</a>
<a ng-click="thirdActive = !firstActive" ng-class"{'btn':true, 'active':thirdActive}">Third</a>
You'll have to have separate scope variables in your controller for firstActive, secondActive, and thirdActive, all set to false by default.
Related
I have a pop hover button. I want to make it's text RTL. How can I do it?
<button
type = "button"
class = "btn btn-success btn-xs pop"
data-container = "body"
data-toggle = "popover"
data-placement = "right"
data-content = "hello world"
data-original-title = ""
title = "">help</button>
add:
style="direction:rtl;"
<button type="button" class="btn btn-success btn-xs pop" data-container="body" data-toggle="popover" data-placement="right" data-content="hello world"
data-original-title="" title="" style="direction:rtl;" >
A paragraph with a right-to-left direction:
<p dir="rtl">Write this text right-to-left!</p>
For your case, and as documented on bootstrap, you have the option to change the popover tempate via the attribute data-template
<div class="popover" role="tooltip" direction="rtl">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
In your code, add this attribute and set the direction to rtl both in title and body
<button data-template='<div class="popover" role="tooltip" dir="rtl"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' ...>
Help
<button>
HTML rtl attribute
bootstrap popovers
try using css, like so
.your-class-name{
direction: rtl;
}
Read the complete reference here
To all folks ending up here, in order to change direction or style text inside bootstrap's tooltip you can enable the HTML rendering inside tooltip using data-html="true" and then adding preferred HTML tags and attributes. Checkout example below:
Step 1 - Displaying plain text in tooltip:
<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="name=درود"></i>
Step 2 - Creating the desired HTML to show in the tooltip:
<p dir='rtl'><strong>name<strong>=درود</p>
Step 3 - Displaying text with direction and bold style:
<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="<p dir='ltr'><strong>name<strong>=درود</p>"></i>
- There are also other possible solutions such as editing the CSS class of popover or tooltip, such as this link.
I have a bunch of popover buttons that will open the same form. Now I need the button id value as hidden field inside the form.
html buttons:
<a type="button" class="pop" data-toggle="popover" id="1">Button 1</a>
<a type="button" class="pop" data-toggle="popover" id="2">Button 2</a>
<a type="button" class="pop" data-toggle="popover" id="3">Button 3</a>
...
popover form:
<div id="popover-content" class="hide">
<form>
<input name="name" type="hidden" value="ButtonIDvalue">
...
popover js:
$('.pop').popover({
html : true,
content: function() {
return $("#popover-content").html();
}
});
You can access the element that triggered the popover as this within the function bound to content. So you could update your code to be:
$('.pop').popover({
html : true,
content: function() {
$('#hidden-input').val(this.id);
return $("#popover-content").html();
}
});
Of course using whatever the correct selector is for your hidden input field.
I have in my index.html a div which initially must be hidden:
<div class="autocomplete" ng-show="div_show" ng-controller="SearchController">
And I need when I click on my Menu on the search link,the div to be shown,basically
ng-show="true"
So on my link I defined something like that:
<a class="list-group-item" ng-click="show()"><i class="fa fa-search fa-fw"></i> Search</a>
And in my controller the function :
$scope.div_show = false;
$scope.show =function(){
$scope.div_show = true;
console.log($scope.div_show);
alert($scope.div_show);
}
When I click on the link I have the alert value set to 'true'but the div is still hidden,
Any suggestions? Thank you!!!
To toggle the ng-show element, just assign the following directive on the Menu button:
ng-click="div_show = !div_show"
All this does is toggles the value of div_show between true and false.
Here's a plunker for a full demo.
Try something like this :
<a href="#" class="list-group-item" ng-click="div_show = true">
<i class="fa fa-search fa-fw"></i> Search
</a>
This will make sure the page is not getting loaded again and i will set the div_show to be true, only if it is in the scope.
My HTML page contains:
<a id="show" href="monlien1" onclick="show()"> Facebook</a>
<a id="show" href="monlien2" onclick="show()"> Twitter</a>
<a id="show" href="monlien3" onclick="show()"> Google</a>
I want to show the href attribute for each click. For example if I click on "Facebook", it will show monlien1, on "Twitter" monlien2, etc.
I tried this but it shows only the value of the first link, monlien1, even if I click on "Twitter" or "Google".
function show(){
var lien=$('#show').attr('href');
alert(''+lien+'');
}
How can I do this?
Start using classes (you shouldn't have the same ID multiple times, it will cause issues) also, pass in this as an argument:
<a class="show" href="monlien1" onclick="show(this)"> Facebook</a>
<a class="show" href="monlien2" onclick="show(this)"> Twitter</a>
<a class="show" href="monlien3" onclick="show(this)"> Google</a>
function show(obj) {
var lien = obj.href;
alert(''+lien+'');
}
Edit: Thanks #FelixKling -- the equivalent to $('#show').attr('href') is obj.getAttribute('href'). obj.href will return a full URL not the actual value of the href attribute.
You cannot have multiple elements with same ID. $('#show') will always select the first elements with that ID.
Give the elements a class and use jQuery to bind the event handler:
<a class="show" href="monlien1"> Facebook</a>
<a class="show" href="monlien2"> Twitter</a>
<a class="show" href="monlien3"> Google</a>
and
$('.show').click(function() {
alert($(this).attr('href'));
});
Learn about jQuery and event handling: http://learn.jquery.com/events/.
I am defining a variable after the page load (storing numerical json data)
I can successfully put this variable in:
<span data-bind="text: extQty"></span>
And when the variable changes it updates the span with the appropriate variable (That works fine).
But it doesn't update my variable within my enable:
<p class="pull-right"><a class="btn btn-primary" data-bind="click: $root.add, enable: pagedList().length < extQty" href="#" title="edit"><i class="icon-plus"></i> Add Extension</a></p>
I need to have the enable effectively disable based on the value that is presented to "extQty". Right now I'm sending 5 to the extQty, and it seems the variable is only updating inside the "text" data-bind rather than the "enable" data-bind.
Knockout enable binding do not work with anchor tags.
So you have 2 solution to this.
Solution 1
<a href='#' title="edit" class="btn btn-primary" data-bind='click: function() {
if(pagedList().length < extQty())
{
//call the desired method from here
}' >
Solution 2
This button displays only when your condition is success and it has click binding
<a class="btn btn-primary" data-bind="click: $root.add, visible: pagedList().length < extQty()" href="#" title="edit">
This button displays only when your negative condition is success and it do not have click binding
<a class="btn btn-primary" data-bind="visible: pagedList().length >= extQty()" href="#" title="edit">
Try using
<p class="pull-right">
<a class="btn btn-primary" data-bind="style: { display: (pagedList().length < extQty) ? 'block' : 'none' }"
href="#" title="edit">
<i class="icon-plus"></i>Add Extension
</a>
</p>
Or else as pointed by #NaveenKumar.. You can use visible attribute...