I have a table populated with Angular.js data:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in tabledata">
<td>00{{t.id}}</td>
<td>{{t.firstName}}</td>
<td>{{t.lastName}}</td>
<td>{{t.userName}}</td>
</tr>
</tbody>
</table>
What I would like to do is add another class to the table tag if the number of rows of data > 10.
Is this possible, and how would I go about it? I know how to do this with a "flat" table in jQuery, but I'm new to the dynamic repeaters of Angular.
Use ng-class
<table ng-class="{'newClassName' : tabledata.length > 10 }">
Related
<table class="table table-bordered table-striped table-condensed">
<thead>
<th>ID</th>
<th>Shop ID</th>
<th>Total Price</th>
<th>Date</th>
<th>Status</th>
</thead>
<tr ng-repeat="order_item in orderitemList | orderBy: 'id'">
<td ng-bind="order_item.id"></td>
<td ng-bind="order_item.shop_id"></td>
<td ng-bind="order_item.total_price"></td>
<td>{{order_item.date | date:'dd.MM.yyyy'}}</td>
<td ng-bind="order_item.status"></td>
</tr>
</table>
I tried to use |my filter function but it didn't work, so I think there is some another way to replace order item status to other meanings. In database status datatype is "bigint", and I want to show meanings with datatype string! Sincerely, thanks in advance!
You need to create a custom pipe (how-to), then in the transform() method you do your magic with your bigInt`(maybe a string switch?) and return the value
Another example of custom pipes!
I want to create a table with datatables and DOTNET MVC. How Can I create a row above the header that contains every select tag each column so I can filter the data? it looks like the image below
<table id="orderTable" class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Customer </th>
<th>Order date</th>
<th>Phone Number</th>
<th>Dish</th>
<th>Delivery Address</th>
<th>Message</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model.Orders)
{
<tr>
<td>#order.OrderId</td>
<td>#order.CustomerName</td>
<td>#order.OrderDate</td>
<td>#order.PhoneNumber</td>
<td>#order.Dish</td>
<td>#order.DeliveryAddress</td>
<td>#order.Message</td>
</tr>
}
</tbody>
</table>
I have 3 css class namely
.green{
background-color:green
}
.yellow{
background-color:yellow
}
.red{
background-color:red
}
And I have a table
which looks like this
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="bg-primary">
<th>Task Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Priority</th>
<th>Action</th>
<th ng-hide="true">autoid</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in dataintbl">
<td>{{d.taskname}}</td>
<td>{{d.taskstartdate}}</td>
<td>{{d.taskenddate}}</td>
<td>{{d.taskpriority}}</td>
<td>
</td>
<td ng-hide="true">{{d.taskmid}}</td>
</tr>
</tbody>
</table>
</div>
now in my <td>{{d.taskpriority}}</td>I have data like
low medium high
now I want to use ng-class in my td and apply css class as per data
if I have (low) in my td, green css class should be apply and so on
what I need to do to achieve this?
This should work.
<td ng-class="{'green': (d.taskpriority == 'low'), 'yellow': (d.taskpriority == 'medium'), 'red': (d.taskpriority == 'high')}">{{d.taskpriority}}</td>
ng-class accepts a map of class names to boolean values. See documentation
I'm using dir-paginate directive in my html and it is working fine when I apply it body of my page, but if I use this directive inside a popup window then the pagination always show 10 pages even if my data is of two pages. Below is my code
<table class="table table-bordered table-striped exectable" >
<tr>
<th>Category</th>
<th>Operation Type</th>
<th>Identifier</th>
<th>Field Name</th>
<th>Old Value</th>
<th>New Value</th>
<th><input type="checkbox" style="margin-right:5px;" id="executeAll" name="executeAll"/>Select</th>
</tr>
<tr dir-paginate="item in items|itemsPerPage:50">
<td>{{item.Category}}</td>
<td>{{item.OperationType}}</td>
<td>{{item.Identifier}}</td>
<td>{{item.FieldName}}</td>
<td>{{item.OldValue}}</td>
<td>{{item.NewValue}}</td>
<td><input type="checkbox" name="{{item.Category}}"></td>
</tr>
</table>
<dir-pagination-controls
max-size="50"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
Please let me know if I'm missing anything.
I got the following html. I cut several columns
<table ng-table="NewIntroCtrl.tableParams" class="table table-striped table-bordered table-hover table-condensed" sortable="true">
<tr ng-repeat="pilot in $data">
<td data-title="'Licensee Id'">{{pilot.license}}</td>
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td>{{licence}}</td>
</tr>
</tbody>
</table>
</td>
<td data-title="'Origin'">{{pilot.origin}}</td>
</tr>
</table>
My controller has these tableParams:
self.tableParams = new NgTableParams({
count: 2
}, {
dataset: self.newIntroductoryFlight.pilots,
counts: []
});
It all works except for the fact that my generated table has got an empty column header right of licences. Also the content gets placed wrong from that point on.
Can i place tables in ng-table td-elements?
A quick look at the ngTable source code and the ngTable directive suggests this might be possible the function does a jQuery find on TD elements when it is on a row meaning it's not just selecting the direct child but all descendents however there is a option in this function for 'ignore-cell'
angular.forEach(row.find('td'), function(item) {
var el = angular.element(item);
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
return;
}
The fix
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td ignore-cell="true">{{licence}}</td>
</tr>
</tbody>
</table>
</td>
Adding this on fixed the header display issues for me.