I have a table where I show items from the database with the ng-repeat. The items are subscriptions which can have weekly or monthly subscription. The table has 3 columns name, weekly and monthly. When a subscription has weekly a tick appear in the cell under the column weekly and if monthly the same. I'm using a ng-if in the td tag like next:
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'WeeklyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'MonthlyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
What I would like to reach is that to have that 2 td merged in one with an ng-class, showing the tick under the right column. I would like to do that for make more clean the code if that is possible.
The entire table:
<table class="table full-width no-border" ng-if="subscriptionEnginesFromServer.length != 0">
<thead>
<tr>
<th class="width-240">
Engine name
</th>
<th class="width-240">
Weekly
</th>
<th class="width-240">
Monthly
</th>
</tr>
</thead>
<tbody ng-show="!loading">
<tr ng-repeat="engine in subscriptionEnginesFromServer | orderBy:'name'">
<td class="">
<!-- clickable-td -->
<span class="first-letter-to-upper">
{{engine.name}}
</span>
<span class="button-icon button--primary button--delete" ng-click="removeEngineFromSubscriptionServer(websites)">
<i class="fa fa-trash-o"></i>
</span>
</td>
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'WeeklyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'MonthlyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
</tr>
</tbody>
</table>
Something like?
<td colspan="2" ng-class="{
'class-weekly': engine.type == 'WeeklyAnalytics,
'class-monthly': engine.type == 'MonthlyAnalytics
}">
Use css to define styles for the classes appropriately.
Related
I need help to solve this problem, i know AlpineJs must use something for "fragments", its fine when i workin on div, but when i do loop table row, and have another row, it become a problem, because i cant use div for the fragment. is there any solution?
here's my code
<template x-for="data in data">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data2 in data.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data3 in data2.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
</template>
</template>
</template>
I'm using Angularjs to repeat some elements in my HTML. Angular repeats the divs correctly, but when trying to repeat an specific div it just doesn't work. Explanation after the code:
<tr ng-repeat="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
<tr class="spacer"></tr>
</tr>
Angular repeats everything inside <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> BUT the last div <tr class="spacer"></tr>
If I comment the spacer the ng-repeat it does repeat the spacer, but if I don't the spacer only shows once at the end of the repeated code.
<!-- <tr class="spacer"></tr> -->
I tried changing the HTML Tag for spacer but I'm having the same issue.
As you can see in the Chrome's debugger, the spacer shows after the repeated code:
If you really want to include your spacer in your iteration there is another option called ng-repeat-start and ng-repeat-end
Something like the following should work
<tr ng-repeat-start="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>
You can find this exact information here on their documentation page.
<tr> inside <tr> is not valid html. You must include ng-class="{'spacer': someCondition}"
<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>
Try to add condition ng-if="$last" to your spacer
So I need to be able to expand some details on each row of a table. Right now I'm having two issues:
Clicking the expand/collapse toggle will trigger the action for every row in the table.
The first row always puts the details above it.
Here's the code segment:
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1=!collapsed1">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
</tr>
<div *ngIf="!collapsed1">
<p>Details</p>
</div>
</tbody>
And what it looks like:
Toggling
Also I had my *ngFor statement in the tag earlier but I realized I can't hit individual client objects if I build a separate for details.
Let me know how I can improve!
It's a very common pattern.
The best and quick solution is to use some ID instead of just a boolean in your collapsed1 variable.
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
<p>Details</p>
</div>
You need a boolean array collapsed[] and use index in your ngFor, so you can use collapsed[i]. Take a look here for using index in ngFor:
ngFor using Index
Let me know if you need more info. Wellcome
Nevermind, here is the code that solved it.
<tbody>
<tr *ngFor="let client of clients; let i = index">
<td class="details-control">
<a class="btn btn-link" (click)="client.hideme=!client.hideme">
<i class="material-icons" *ngIf="!client.hideme">
expand_more
</i>
<i class="material-icons" *ngIf="client.hideme">
expand_less
</i>
</a>
</td>
<td width="30%">{{client.firstName}}
<tr *ngIf="client.hideme">
<td>Hey, I'm a bunch of details!</td>
</tr>
</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}
<tr *ngIf="client.hideme">
<td>More Issuer details</td>
</tr>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
I am using this lib: https://github.com/Dynamitable/Dynamitable
It's pretty nice, and it works perfectly for me, for now.
When I'm trying to filter it (like filter "name" when I'm typing "abc" on the input field) all rows are dissapearing in order to show me every "name" rown which contains "abc. So this is nice !
My problem is, I'm using a very big table, and the filter works "too" good for me. I mean, I can't type my entire "research" before it start working.
So, my question is, is it possible to add a "delay", in order to let people type some letter before starting filtering ? Something like 0.5 sec or even 1 sec ?
I had try to play with this on line 150/153, but no success :
$(selector).on('change keyup keydown', filterAction);
// initialization
filterAction();
My proposal is to disconnect the original filters and add your own filter with the capability to start the filtering only after n char.
In the following an example:
$('.js-dynamitable .js-filter').off('change keyup keydown').on('change keyup keydown', function (e) {
//
// start filtering on text input only after 2 chars
//
if ($(this).is(':text') && $(this).val().length < 2) {
return; // stop filtering
}
var index = $(this).closest('tr').children('td, th').index($(this).closest('td, th'));
var dynamitable = $('.js-dynamitable').dynamitable();
dynamitable.displayAll();
$(dynamitable).find('.js-filter').each(function () {
var $this = $(this);
dynamitable.filter(index, $this.val());
});
});
.glyphicon {
cursor: pointer;
}
input, select {
width: 100%;
}
.second, .glyphicon-chevron-down, .glyphicon-chevron-up {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://rawgit.com/Dynamitable/Dynamitable/master/dynamitable.jquery.js"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
<h1><span class="first">Dynami</span><span class="second">table</span></h1>
<div class="table-responsive">
<table class="js-dynamitable table table-bordered">
<thead>
<tr>
<th>Name
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Email
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Age
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Account
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Scoring
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
</tr>
<tr>
<th>
<input class="js-filter form-control" type="text" value="">
</th>
<th>
<select class="js-filter form-control">
<option value=""></option>
<option value="#dynamitable.com">dynamitable.com</option>
<option value="#sample.com">Sample</option>
</select>
</th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy Krueger</td>
<td>freddy.krueger#sample.com</td>
<td class="text-right">122</td>
<td class="text-right">2300$</td>
<td class="text-right">+15</td>
</tr>
<tr>
<td>Clint Eastwood</td>
<td>clint.eastwood#sample.com</td>
<td class="text-right">62</td>
<td class="text-right">48 500$</td>
<td class="text-right">+12</td>
</tr>
<tr>
<td>Peter Parker</td>
<td>peter.parker#dynamitable.com</td>
<td class="text-right">22</td>
<td class="text-right">210$</td>
<td class="text-right">-5</td>
</tr>
<tr>
<td>Bruce Wayne</td>
<td>bruce.wayne#dynamitable.com</td>
<td class="text-right">42</td>
<td class="text-right">-8500$</td>
<td class="text-right">+2</td>
</tr>
<tr>
<td>Jackie Chan</td>
<td>jackie.chan#sample.com</td>
<td class="text-right">32</td>
<td class="text-right">-250.55$</td>
<td class="text-right">0</td>
</tr>
<tr>
<td>Bruce Lee</td>
<td>bruce.lee#sample.com</td>
<td class="text-right">32</td>
<td class="text-right">510$</td>
<td class="text-right">-7</td>
</tr>
</tbody>
</table>
</div>
</div>
I'm working on a table which contains hidden details for each row. Table rows are made with Bootstrap accordion.
Accordion rows and hidden details are working fine but the JS that changes the chevron icon when toggling [collapsed/expanded] is not working properly. It should change the chevron icon just on the clicked row but currently it changes the chevron icon for all rows.
I have read some related posts regarding my question and have tried them all but I'm unable to get it working. What I'm missing?
There is a Bootply Demo here
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='#Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
Change your .parent() to .prev() or .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
This should work:
$(".accordion-toggle").on("click", function () {
if($(this).find(".fa").hasClass("fa-plus-square")) {
$(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
} else {
$(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
}
});