Add id to ng-template with Angular Bootstrap accordion - javascript

I'm having trouble adding dynamic id to the heading template. I tried including an id="{{group.title}}" but it doesn't work. Any help or suggestion would be great!
<div ng-controller="AccordionDemoCtrl">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="group in groups">
<uib-accordion-heading>
{{group.title}}
</uib-accordion-heading>
{{group.content}}
</div>
</uib-accordion>
</div>
<script type="text/ng-template" id="group-template.html">
<div id="{{group.title}}" class="panel-heading" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<a href tabindex="0" class="accordion-toggle" >
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
<b>{{heading}}</b>
</span>
</a>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: left" ng-transclude></div>
</div>
</script>
Here is the plunkr: https://plnkr.co/edit/WbDY1S?p=preview

You can't use group in that context as you have a different scope inside template.
group will be available in a parent scope, so you could use {{$parent.group.title}}
https://plnkr.co/edit/f7fHKohu7StKB4wJLeTv?p=preview

Related

Display different data in collapsible panel body

I am working on displaying data into multiple collapsible panel body dynamically to display individual data into each body on click but somehow on every click it sharing same data for each panels.
What I wanted to do is to display individual data for each item. Here is my sample code that I have written.
<span ng-repeat="t in tabledata">
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{t.appSystemName}}">
<table class="table borderless">
<tr>
<td>
<span class="glyphicon glyphicon-plus"
ng-click="getDataForProdQa(t.appSystemName)"
ng-model="plus">
</span>
</td>
<td>{{t.dbName}}</td>
<td>{{t.appSystemName}}</td>
<td>{{t.Id}}</td>
<td>{{t.frequency}}</td>
<td>{{t.timeStamp}}</td>
</tr>
</table>
</a>
</h4>
</div>
</div>
<div id="{{t.appSystemName}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table table-responsive" >
<tr ng-repeat="i in innertabledata">
<td>{{i.dbName}}</td>
<td ng-model="check">{{i.appSystemName}}</td>
<td>{{i.Id}}</td>
<td>{{i.frequency}}</td>
<td>{{i.timeStamp}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</span>
Looking some assistance to fix this issue
just try to make the id="accordion" dynamic as it is under ng-repeat and everytime same id is duplicated.So make dynamic id like id="accordion{{$index}}" and also the data-parent make it dynamic.Hope this helps.
Thanks

Dynamically set class or id using index of ngFor loop

So I am trying to create a collapse (accordion) in Bootstrap 4 using Angular. I would love to be able to create almost the entire thing using an ngFor loop.
So far I have this:
<div class="row">
<div class="col-lg-6">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card" *ngFor="let environment of environments; let i = index;">
<div class="card-header" role="tab" id="headingi">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsei" aria-expanded="false" aria-controls="collapsei">
Number: {{i}}
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div *ngFor="let name of uniqueNames; let j = index" class="card infoBox">
<p>this is accordion {{i}}, section: {{j}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I am trying to do is use "let i = index" to set the id and class names needed to make the accordion know what to do when certain links are clicked. So ideally the first accordion section would have class and id of collapse0/heading0 and the next would have id and class of collapse1/heading1 etc.
However, the previous code must not be working because all the accordions and their headers show up and do nothing when clicked on. It does generate the correct number, show all the right headers, and the bodies associated with them.
Any help? thanks!
You can do it this way also
id="collapse{{i}}" class="heading{{i}}" attr.aria-controls="heading{{i}}"
and the fact that aria- attributes are being handled another way in angular you have to prefix them with attr.. In your example should that be attr.aria-controls="heading{{i}}".
You just have to databind id:
<div class="card-header" role="tab" [id]="'heading'+i">
<!-- and -->
<div [id]="'collapse' + i" class="collapse show" role="tabpanel" [aria-labelledby]="'heading' + i">
And then you can access your index via i.
*Here is working code with bootstrap 5 accordion with ngFor Angular 12 (dynamic id):
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Installed Offer Version Details
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<ng-container *ngFor="let lineItem of allLineItems">
<!-- <line-item-detail [lineItem]="lineItem"></line-item-detail>-->
<div class="accordion-item my-4">
<h2 class="accordion-header" id="heading{{lineItem.id}}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" attr.data-bs-target="#collapse{{lineItem.id}}" aria-expanded="true" attr.aria-controls="collapse{{lineItem.id}}">
{{lineItem.productType}} : {{lineItem?.productOffering?.name}}
</button>
</h2>
<div id="collapse{{lineItem.id}}" class="accordion-collapse collapse show" attr.aria-labelledby="heading{{lineItem.id}}">
<div class="accordion-body">
your body text
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
Even you can create sub-component of what is in ngFor like I commented the <line-item-detail></line-item-detail> tag.

Link preview on page load using jQuery Preview Plugin(JavaScript)

I have use jQuery Preview Plugin for Link Preview on Github. It works smoothly when I enter or paste a URL in the input, But could it be possible for the links which are loaded from database while page loading/refreshing? I tried the below jQuery code but it isn't working. I'm using it in angularjs. Here is my markup.
<div class="post-feeds-block" data-ng-init="init()" >
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" >
<div class="panel panel-default" ng-repeat="feeds in postfeeds">
<div id="collapse{{feeds.p_id}}" class="panel-collapse collapse" ng-class="{in: feeds.expanded}" role="tabpanel" aria-labelledby="heading{{feeds.p_id}}">
<div class="panel-body">
<p data-ng-bind-html-unsafe="feeds.description" id="content{{feeds.p_id}}"></p>
<!-- Links section -->
<div class="attached-feeds" ng-show="feeds.weblink">
<div>
<input class="url_load" type="text" value="{{feeds.weblink}}" style="display:none;"/>
<div class="selector-wrapper" id="{{feeds.p_id}}"></div>
</div>
<span class="title-icon">
<span></span>
<a class="edit" href="javascript:void(0);"></a>
<span></span>
<a class="delete" href="javascript:void(0);"></a>
<span></span>
<a class="drag" href="javascript:void(0);"></a>
</span>
</div>
<!-- Links section -->
</div>
</div>
</div>
</div>
</div>
/* Javascript */
window.onload = function(){
setTimeout(loadPreview(), 1000);
}
function loadPreview(){
$(".url_load").each(function(){
$(this).preview({
key:'xxxxxxxxxxxxxxxx',
render: function(obj){
$(this).parent().find('.selector-wrapper').html(obj);
}
});
});
};
Can anyone help me with this?

Using html templates in angular's ng-switch

Im making an 'interactive menu' that moves along with user clicks.
Im wondering if there is a way to include html templates in ng-switch,
since all the logic is different in each 'switch' - it will result in huge html files.
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<h1>1</h1>
</div>
<div ng-switch-when="2">
<h1>2</h1>
</div>
</div>
Use ngInclude:
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<ng-include src="'template1.html'"></ng-include>
</div>
<div ng-switch-when="2">
<ng-include src="'template2.html'"></ng-include>
</div>
</div>
Note: Dont forget to use single quotes wrapped inside the double quotes if you are hard-coding the path.
You should be able to do it with ng-include directive :
<div class="content" ng-switch on="selection">
<ng-switch-when="1" ng-include="//TEMPLATE PATH">
<ng-switch-when="2" ng-include="//TEMPLATE 2 PATH">
</div>
**I used ng-Include this way.**
<!-- Main content -->
<div class="row">
<!-- right col -->
<section class="col-lg-12">
<ul class="nav nav-tabs responsive ui-tabbed" id="myTab">
<li class="active">
<a data-ng-click=' main.active.tab = "tab-1" '>Tab 1</a>
</li>
</ul>
<!-- end responsive tabs -->
<div class="tab-content ui-tabbed-contents responsive">
<div data-ng-switch = " main.active.tab ">
<div data-ng-switch-when='tab-1' >
<ng-include src="'tab-one.html'" ></ng-include>
</div>
</div>
</div>
</div>
<!-- end main tabs container -->
</section>

HTML mustache templates - how to get first item of collection

I'm using mustache templates to correctly generate bootstrap accordions. Now I need to pass a prefix to the top item id = 'accorElM' and thought I could do something like this.
 
<div class="accordion" id='{{#DataResult[0].prefixID}}_accorElM'>
IE, get the first item in the collection
Is this possible to do?
Code sample:
<div class="accordion" id='accorElM'>
{{#DataResult}}
<div class="accordion-group">
<div class="accordion-heading">
<a style="text-align: left; text-decoration: none" class="accordion-toggle btn" data-toggle="collapse" data-parent='#{{prefixID}}accorEl' href='#{{prefixID}}collapseEl_{{id}}'>
<i class="icon-globe"></i> {{tipo}}<i class="icon-chevron-down pull-right"></i>
</a>
</div>
<div id='collapseEl_{{id}}' class="accordion-body collapse">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span9">
<address>
<br />
{{zona}}
<br />
{{cpostal}}
<br />
{{pais}}
</address>
</div>
<div class="span3">
<div class="pull-right">
.....
</div>
</div>
</div>
</div>
</div>
</div>
{{/DataResult}}
</div>
I'm guessing your data must be something like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
]
}
but in the mustache template file, I don't think you can index the object items. The approach that I would have taken would involve manipulating the Json object in javascript(or even in the backend when constructing the object) before rendering it.
In your case, if you need the prefixID of the first item in the DataResult. you could alter the object to make it look like this:
{"DataResult":[
{"prefixID":"1","name":"first"},
{"prefixID":"2","name":"second"}
],
"theIdIWant":"1"
}
and then in the template file:
<div class="accordion" id='{{theIdIWant}}_accorElM'>
{{#DataResult}}
<div class="accordion-group">
///////
</div>
{{/DataResult}}
</div>
Hope this helps.

Categories