How to add html to title in popover? In documentation I can found only using html in content. It is possible to add html to title? I know that I can style this in css but I want to add button to title.
https://plnkr.co/edit/G1Q6g3oZhFKZpgbsMCUK?p=preview
<button uib-popover-html="htmlPopover" popover-placement="bottom" popover-title="Tekst -> <button>Edit</button>" class="btn btn-default">HTML Popover</button>
If you look at to final generated HTML, you can get idea how its going to render it on UI.
for your attribute popover-title="Tekst -> <b>Sample</b> <button>Edit</button>"
HTML generated as below,
<h3 class="popover-title ng-binding ng-scope" ng-bind="uibTitle" ng-if="uibTitle">Tekst -> <b>Sample</b> <button>Edit</button></h3>
Please check attribute "ng-bind" it means whatever you provide to popover-title will internally attached with ng-bind.
Like the same if you observe your popover body generation for uib-popover-html="htmlPopover"
corresponding HTML will generated as below
<div class="popover-content ng-binding" ng-bind-html="contentExp()"><b style="color: red">I can</b> have <div class="label label-success">HTML</div> <input type="button" value="sample"> content</div>
here you can see "ng-bind-html" thats why body can take any HTML and display it on UI while its not true for Title coz its using ng-bind.
Check this plunker : http://plnkr.co/edit/eREFCpVrYSi6kw7mNNXq?p=preview
Related
I have the following code that tries to display html in the popup:
layer.bindPopup(
`<p data data-campaign="4" data-token="${this.state.reg_mapping[feature.properties.name]}">
<h4>Region: ${feature.properties.name}</h4>
<h4 data-token-re></h4>
<button type="submit" data-button>Donate Now</button>
</p >`
);
The problem is that I expect the p tag to be the parent of all elements, but when I'm in inspector I can see that the p tag closes thus is not the parents of the other elements. How can this be fixed ?
EDIT: Im using react.js
Replace your <p> with a <div>. Paragraphs cannot contain header <h4> tags.
I am trying to append body of the bootstrap modal dynamically. Here is the body Markup of the Modal.
<!-- try to indent the codes for readability -->
<div class="modal-body">
<div class="row text-left" style="margin-left: 2em;">
<div class="form-group"></div>
</div>
</div>
and here is the Jquery code to append the contents on click event of a button.
$('.form-group').append(EditHTML);
EditHTML is the markup that got generated dynamically. Now issue is that with every button click event EditHTML is being added with the previous content. I need to reset the Modal, each time button is click.Please help.
Just use .html()
$('.form-group').html(EditHTML);
Description : When .html() is used to set an element's content, any
content that was in that element is completely replaced by the new
content. Additionally, jQuery removes other constructs such as data
and event handlers from child elements before replacing those elements
with the new content.
I'm not sure I have understood right：
$('.form-group').html(EditHTML);
I need to be able to hide elements that have been generated dynamically by ng-repeat by clicking in other elements that were also created by ng-repeat. Example HTML:
<div ng-repeat="thing in things" ng-show="!displayId || displayId == 'thing.id'">
<button ng-click="displayId = 'thing.id'">Click me!</button>
</div>
The initial display works fine, since displayId is unspecified until a button is clicked, but what I expect to happen is displayId gets set to the thing.id of whatever button I click, and once it's set, all other divs get hidden. However, nothing happens.
Is there a way to accomplish this? I'm trying not to use any jquery and do this in a purely angular way.
So based on the extra detail you provided, you can use filter on your ng-repeat.
<div ng-repeat="thing in things | filter:{id: selectedThingId}">
<button ng-click="setSelectedThing(thing.id)">Click me!</button>
</div>
And in your controller:
$scope.selectedThingId;
$scope.setSelectedThingId = function setSelectedThingIdFn(thingId) {
$scope.selectedThingId = thingId;
}
Here is an embedded Plunker Example:
<iframe style="width: 100%; height: 600px" src="http://embed.plnkr.co/tpMSLcpEGkoWx4eGDcHo/preview" frameborder="0" allowfullscren="allowfullscren"></iframe>
I'm using ui.bootstrap.progressbar (code here: https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js) and I'm trying to extend it to support some custom HTML (or just text) on the progess bar. It looks something like this in vanilla Bootstrap:
<div class="progress">
<div class="bar" style="width: 60%;">This thing is at 60%</div>
</div>
http://plnkr.co/edit/WURPlkA0y6CK7HYt3GL1?p=preview
I'm new at directives, so I this is what I tried:
in ProgressBarController I added a label variable
var label = angular.isDefined($attrs.label) ? $scope.$eval($attrs.label) : '';
also modified the object the controller returns to include the label. Then added the bar.label in the directive's template like so:
<div class="progress">
<progressbar ng-repeat="bar in bars"
width="bar.to" old="bar.from"
animate="bar.animate" type="bar.type">
</progressbar>
{{bar.label}}
</div>
The progressbar appears just fine, but I cannot see the value of the label.
What am I doing wrong? Thanks in advance.
This turned out to be pretty straightforward.
All I had to do was:
modify the progress directive and add transclude: true
modify the progress.html to include an ng-transclude directive, like so
:
<div class="progress">
<span ng-transclude></span>
<progressbar ng-repeat="bar in bars" width="bar.to" old="bar.from" animate="bar.animate" type="bar.type"></progressbar>
</div>
After this, text put between the <progressbar></progressbar> will render on the progressbar, however some CSS modifications are also needed to make the text appear in the correct position.
But every progressbar and every text needs additional positioning, so this part is still not a complete solution. Setting the wrapper's position to relative and the <span>'s to absolute is one step but still not enough.
I havent used Javascript in a while and I have almost forgotten it all but I would like to be reminded how to show and hide html div boxs to display hidden content by clicking on a text or such.
In this case I would like to have a hidden box filled with login information while the ahref link will be the indicator to tell the loginbox to appear or disappear and by knowing this I could easily apply it to the register area.
I would like to know how to do this or a pop up box sort of thing.
This is what I have so far:
Could anyone help me with this now. I can't seem to get it work.
The toggle is
Login
Showing content
<div class="signup" style="display: none;">
<p> test </p>
</div>
Javascript is
function showStuff(signup) {
document.getElementById('signup').style.display = 'block';
}
Why won't this work
Looks like the issue with your code is that your div has a class as 'signup' not an id.
try:
<div id="signup" style="display: none;">
<p> test </p>
</div>
See this jsfiddle for a working example with an additional fix to how your function works.
http://jsfiddle.net/aUQ6B/
Original Answer:
See: javascript hide/show element
Code to make note of is the following:
document.getElementById('myid').style.display
Setting this to 'none' hides the element.
Setting it to 'block, 'inline' or whatever the original value was will show the element.