I am getting 3 values from the backend : isDone, isInProgress, isFailed and based on these 3 values, i need to change the hover over text of a span element in angularview. if the element is isDone or isInProgress, i have to show one icon with 2 different hover text. if the element is isFailed , i have to show an error message on the screen:
The code :
<span class="glyphicon glyphicon-refresh blue"
title="In progress" ng-show="action.isInProgress"> </span>
How do i incorporate the IsDone in this span?
Just do this:
<span class="glyphicon glyphicon-refresh blue" title="{{ action.isInProgress ? 'Action is in progress' : 'Action is complete.'}}" ng-show="action.isInProgress||action.isDone"></span>
what about
<span class="glyphicon glyphicon-refresh blue"
title="{{status}}" > </span>
and update your status variable depending on the value, as "In progress", or ..
You can use conditional checks
<span class="glyphicon glyphicon-refresh blue"
title=" Action is Complete" ng-if="action.isDone"> </span>
<span class="glyphicon glyphicon-refresh blue"
title="Action in progress" ng-if="action.isInProgress"> </span>
Related
Having the following code:
<i ng-if="!$ctrl.aggregated"
ng-class="!$ctrl.mainObj[item.name].hidden ? 'fa fa-check-square':'fa fa-square consumption-item__disabled'"
ng-style="{'color': item.color}"
ng-click="$ctrl.onItemClicked(item)"></i>
{{item.name}}
<i ng-if="!$ctrl.aggregated && $ctrl.multi"
class="fa fa-dot-circle-o fa-bullseye-position"
ng-click="$ctrl.onFocusClicked(item)"
uib-tooltip="this is my text"></i>
</div>
There is a tooltip at the end: uib-tooltip="this is my text" which is shown in two lines:
Is there a way to make it appear on one line the whole text?
In my configuration of a datatable button i have this:
buttons:[{
extend: 'csvHtml5',
text: '<span class="blabel"><i class="fa fa-download"> </i></span><span class="btxt">Export table</span>',
className: 'btn btn-labeled'
},
the result is this button:
<a class="btn btn-default buttons-csv buttons-html5 btn-labeled" tabindex="0" aria-controls="DataTables_Table_0" href="#">
<span> ---> I wanna remove this
<span class="blabel">
<span class="btxt">Export table to CSV</span>
</span>
</a>
I wanna remove the external span and the buttons-csv buttons-html5 classes... what is the correct way to do this??
You try use:
Remove span tag
$('span:not([class])').contents().unwrap();
and remove classs
$('.buttons-csv.buttons-html5').removeClass('buttons-csv buttons-html5');
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.
Is it somehow possible to "disable" a custom directive in Angular if an ng-select located within that directive receives an empty array?
Namely, consider the following code that creates an expand-collapse area on the page. I populate the content area of the area with a list of things. Now, sometimes there are items on the list, yet in other cases the list is empty. The problem is that when the list is empty, the custom directive still leaves a "+" sign on the page to indicate expandability. It is bad tone to keep it there and not have anything come up when the user clicks on it. How could I disable this directive entirely or get rid of the "+" created by it when the list is empty? The latter is my ultimate goal in this case.
<span ng-controller="ListChildren">
<v-accordion class="vAccordion--default" style="width:80%; margin: auto">
<v-pane>
<v-pane-header>
</v-pane-header>
<v-pane-content>
<span ng-repeat="child in childs">
<a href="/#/activity/{{child._id}}" class="btn btn-warning btn-block badge" ng-style="{'background-color' : child.color, 'color' : child.colorTitle, 'border-color' : child.colorBorder}" ng-class="{'pulsation' : pulse , 'nonpulsation' : !pulse}" ng-init="pulse = false">
{{child.title}}
<span class="badge" ng-style="{'background-color' : child.colorSupport, 'color' : child.colorFont}">Current: {{counter | secondsToHHmmss }}</span>
<span class="badge" ng-style="{'background-color' : child.colorSupport, 'color' : child.colorFont}">Total: {{child.totalTime | secondsToHHmmss }}</span>
</a>
<a ng-click="toggle =!toggle; $parent.pulse = !$parent.pulse; toggleTimer()" ng-class="{'glyphicon glyphicon-pause' : toggle , 'glyphicon glyphicon-play-circle' : !toggle}"></a>
</span>
</v-pane-content>
</v-pane>
</v-accordion>
</span>
Working code:
<span ng-controller="ListChildren">
<v-accordion class="vAccordion--default" style="width:80%; margin: auto" ng-if="childs.length > 0">
<v-pane>
<v-pane-header>
</v-pane-header>
<v-pane-content>
<span ng-repeat="child in childs">
<a href="/#/activity/{{child._id}}" class="btn btn-warning btn-block badge" ng-style="{'background-color' : activity.color, 'color' : activity.colorTitle, 'border-color' : activity.colorBorder}" ng-class="{'pulsation' : pulse , 'nonpulsation' : !pulse}" ng-init="pulse = false">
{{child.title}}
<span class="badge" ng-style="{'background-color' : activity.colorSupport, 'color' : activity.colorFont}">Current: {{counter | secondsToHHmmss }}</span>
<span class="badge" ng-style="{'background-color' : activity.colorSupport, 'color' : activity.colorFont}">Total: {{activity.totalTime | secondsToHHmmss }}</span>
</a>
<a ng-click="toggle =!toggle; $parent.pulse = !$parent.pulse; toggleTimer()" ng-class="{'glyphicon glyphicon-pause' : toggle , 'glyphicon glyphicon-play-circle' : !toggle}"></a>
</span>
</v-pane-content>
</v-pane>
</v-accordion>
</span>
<span ng-if="ItemIndex.ItemCount>0"><a href="#" ng-click="deleteItem(ItemIndex)"
class="underlined-text-button"><i
class="glyphicon glyphicon-remove"></i> Remove items</a>
</span>
If I have more than 0 item, text getting 'Remove items', right. But I want, if I have one item, text change to 'Remove item'
So,
item == 1 == remove item
item > 1 == remove items
How can I setup this?
use like this,
<span ng-if="ItemIndex.ItemCount>0">
<a href="#" ng-click="deleteItem(ItemIndex)"
class="underlined-text-button"><i
class="glyphicon glyphicon-remove"></i>
{{ (ItemIndex.ItemCount == 1) ? 'Remove item' : 'Remove items' }}
</a>
</span>
if (ItemIndex.ItemCount == 1) is true then prints Remove item, else prints Remove items.
OR you can use ng-show, ng-hide or ng-if,
<span ng-if="ItemIndex.ItemCount>0">
<a href="#" ng-click="deleteItem(ItemIndex)"
class="underlined-text-button"><i
class="glyphicon glyphicon-remove"></i>
<span ng-show="ItemIndex.ItemCount == 1"> Remove item </span>
<span ng-show="ItemIndex.ItemCount > 1"> Remove items </span>
</a>
</span>