How the Way Start descending order Number Via {{1+ $index}}
Example 1,2,3,4, to 4,3,2,1
<thead>
<tr>
<th width="5%">#</th>
<th width="20%">link</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in post.users | orderBy : '-id'">
<th>{{1+$index}}</th>
<td>
{{user.email}}
</td>
</tr>
</tbody>
to do this you can use java script reverse() function.store that reversed array in a array variable and iterate in your html file if you are using angular 2 or above.
Related
I am working on a scenario where i am using nested ng-repeat to display the json values in html table.Attached the plunker plnkr.co/edit/qC6v8nOP4iFgjlxezTa1?p=preview.I am not able to see the last column values properly.
You have no problems with AngularJS, but with HTML, try this variant:
<table width="100%">
<thead>
<tr>
<th>Id:</th>
<th>Age:</th>
<th>Subjects:</th>
<th>Only Lecturer Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in student track by $index">
<td>{{x.id}}</td>
<td>{{x.age}}</td>
<td>{{x.subjects}}</td>
<td>
<span ng-repeat="j in x.subjects">
{{j.Lecturer}}
</span>
</td>
</tr>
</tbody>
</table>
I'm trying to generate a table using angularjs. The code is as follows
Code:
<table>
<thead>
<tr>
<th>Column Name1</th>
<th>Column Name2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Items">
<th>{{Items[$index].Age}}</th>
<th>{{Items[$index].School}}</th>
</tr>
</tbody>
</table>
Here what I want to do is that, when age and school data is generated in the table, they should go under a person's name and that name should appear in the column. How can I do this?
If I have an $scope array as follows;
$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];
I want the colum name to be Jhon and Below that I want the other 2 data
You are repeating through the array of Items where each object (in your case 'item') have a Age and School property for example:
var Items = [{Age:23, School: 'some school'}....];
this part is wrong:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{Items[$index].Age}}
</th>
<th>
{{Items[$index].School}}
</th>
</tbody>
it should be:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{item.Age}}
</th>
<th>
{{item.School}}
</th>
</tbody>
Look at the snippet below, that illustrates how to achieve the Age and School under the Name:
<tr ng-repeat="item in Items">
<td>
<table>
<thead>
<tr>
<th colspan="2">{{item.Name}}</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><i>Age:</i> {{item.Age}}</td>
<td align="center"><i>School:</i> {{item.School}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Watch the demo here.
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>
I have a paginated table using a smart table. I want to sort using first the status and then the code. I can't use orderBy from AngularJS because it will order the elements of each page, not all. And st-sort-default of smart table orders only for one column.
<table st-table="lista.displayedPublications" st-safe-src="lista.publications">
<thead>
<tr>
<th st-sort="publication.status" >STATO</th>
<th st-sort="publication.communicationCode">TREAT CD</th>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="publication in lista.displayedPublications">
<td>{{publication.status}}</td>
<td>{{publication.communicationCode}}</td>
<td>...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div st-template="ListaTreatement/pagination.html" st-pagination="" st-items-by-page="10"></div>
</td>
</tr>
</tfoot>
</table>
In the controller:
public publications: PublicationExtended[];
public displayedPublications = [].concat(this.publications);
constructor(...){
new Api($http).getList(me.comunicationType, me.comunicationStatus).then(
function(response : angular.IHttpPromiseCallbackArg<PublicationExtended[]>) {
me.publications = response.data;
}
}
use $filter("orderBy")($scope.lista.displayedPublications, ["+status", "+code"]); in your controller to sort your data before providing it to your table. + and - can be used to set descending or ascending sort order.
I have a problem when trying to format a table created with two arrays using ng-repeat. I have the two arrays; game.Teams[0].Scores and game.Teams[1].Scores, and the following html:
<table>
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in game.Teams[0].Scores">
<td>
{{score.ExtraPoints}}
</td>
<td>
????
</td>
</tr>
</table>
I want to loop over both lists and fill the second column with items from the second list. Is this achievable with ng-repeat, or will I have to merge the two and loop over a combined list?
Assuming both teams have the same amount of items
<table ng-init="scores = game.Teams[0].Scores.length > game.Teams[1].Scores.length ? game.Teams[0].Scores : game.Teams[1].Scores">
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in scores">
<td>
{{game.Teams[0].Scores[$index].ExtraPoints}}
</td>
<td>
{{game.Teams[1].Scores[$index].ExtraPoints}}
</td>
</tr>
</table>
Note: you can do that ngInit part in the controller, just showing how it can be done all in the view.