This only happens in IE/Edge and works as expected in Chrome/Firefox. However, in IE, the tables items display for a second and then disappear. Here is my HTML:
<table md-table md-row-select ng-model="upLoaders">
<thead md-head md-order="query.tom" md-on-reorder="getIds">
<tr md-row>
<th md-column><span>Username</span></th>
<th md-column>Role</th>
<th md-column>Approved</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="user in filtered = (users | filterArray:uploadedUsers)">
<td md-cell>{{user.username}}</td>
<td md-cell>{{user.role}}</td>
<td md-cell>{{user.approved}}</td>
</tr>
</tbody>
</table>
Try updating Angularjs version to 1.7.2 above
Related
I am using nested array in angularjs and bootstrap and that is dynamically coming from server side code.In that displaying table format using rowspan but it is working two level nested array only need to have more level.I tried plunker code.In this example using sample only but I need more levels
<table class="table table-bordered">
<thead>
<tr>
<td>check</td>
<th>Member</th>
<th>Age</th>
<th>Branch</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members">
<td rowspan="{{group.members.length}}" ng-hide="$index>0">
{{group.id}}
</td>
<td >
{{member.name}}
</td>
<td >
{{member.age}}
</td>
<td >
<table >
<tbody>
<tr ng-repeat="stu in member.student" >
<td >{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
FIDDLE
You did not add class="table" for inner table.
Also give padding:0px to td
Fiddle
<td style="padding:0px">
<table class="table">
<tbody>
<tr ng-repeat="stu in member.student" >
<td>{{stu.Branch}}</td>
</tr>
</tbody>
</table>
</td>
I want to fetch the data inside table but not getting any data.
Code is here--
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr>
<th><b>Project Name :</b></th>
<td ng-repeat="a in viewProjects">
{{a.id}}
</td>
{{viewProjects | json}}
</tr>
</tbody>
</table>
</div>
getting all data in viewProjects through json but unable to print it inside table row n each function of controller services and models working perfactly except this.
Please help me to get this issue.
You can use <ng-container ng-repeat=""></ng-container> for any angularJS condition without use any html element as below :
<table>
<tr>
<td>xyz</td>
<ng-container ng-repeat="a in myArray">
<td>{{a.id}}</td>
</ng-container>
</tr>
</table>
It looks like you should loop over tr instead of td in this case
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in viewProjects">
<td><b>Project Name :</b></td>
<td >
{{a.id}}
</td>
</tr>
</tbody>
</table>
</div>
Below is my table's html code -
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
This is js code for table -
$('#srchTable').dataTable();
I am populating table from json result. Below is the json -
[{
"Name":"Sam",
"Age":"25",
"Salary":"$25000"
},
{
"Name":"Phillip",
"Age":"25",
"Salary":"$30000"
}]
Now when I am clicking on sort icons table is showing No data available in table message. And same thing is happeing when I am trying to search in data table.I tried below code but it didn't worked.
$('#srchTable').dataTable({
"ordering":true,
"searching": true
});
Please help.
In this case jquery is executed before angular render the data .
You don't need to use jquery here. Angular provides filters
and sorting options .
example :
<input type="search" ng-model="query">
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr ng-repeat="jsonSearchData in searchData | filter : query | orderBy : 'name'">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}} </a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</table>
Be sure to wrap your data rows in <tbody></tbody>.
<table id="srchTable" style="width:100%; font-size:0.85em;"">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody><!-- start after </thead> Be sure not to include in loop -->
<tr ng-repeat="jsonSearchData in searchData">
<td><a id="link1" href="" ng-click="openPopUp()">{{jsonSearchData.Name}}</a></td>
<td>{{jsonSearchData.Age}}</td>
<td>{{jsonSearchData.Salary}}</td>
</tr>
</tbody><!-- end after loop -->
</table>
var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
We have implemented a report table using angular smart table.When user applied search criteria using st-search , we need to export all items into csv.We have used ng-csv directive for exporting. When use st-table array collection, the only first page data is getting.That mean total 7 records after filtering and first page showing 5 items, only this data(5 items) is exported.How can export all filtered data?
<table class="table table-striped" st-table="displayed">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th >email</th>
</tr>
<tr>
<th>
<input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="5" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
You can have access to the filtered collection through the table controller api. So you just need to create a directive which requires the stTable controller:
.directive('stExport',function(){
return {
require:'^stTable',
link:function(scope, element, attr,ctrl){
element.bind('click',function(){
alert(ctrl.getFilteredCollection().length);
})
};
}
have a look at that running example