$scope.values = [1,2,3,4,5,6,7]
How do I generate below html from the above data in the below format, using angular js. using ng-repeat etc..
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td></td>
</tr>
</table>
This is one method:
JS:
$scope.values = [1,2,3,4,5,6,7];
HTML:
<table>
<tr ng-repeat="value in values" ng-if="$index % 2 == 0">
<td>{{values[$index]}}</td>
<td>{{values[$index+1]}}</td>
</tr>
</table>
Because the values is odd, the last will be empty. If you'd prefer to only output one TD when the values are odd you can simply add a ng-if to the TDs so that they are not displayed if they have no value.
Though, I would personally restructure the data before it gets to the view. Break the values apart into rows and then loop through the data set to get the rows, and then loop through the rows to get the individual values.
Far more information and options can be found (on SO already) here: How would I use AngularJS ng-repeat with Twitter Bootstrap's scaffolding?
Related
I am having trouble trying to present data from an api. The data comes in a json response organized like this API from Guild Wars for character data
I made an angularJS request and used a series of nested ng-repeats to present the data, but the innermost loop , the inventory data , isn't being present properly. Only some of it is being iterated.
This is my code :
<table>
<tr ng-repeat="char in $ctrl.chars | orderBy:'-age'">
<td>
<table id="charTotal">
<ng-include src="'charBasic.html'"></ng-include>
<ng-include src="'charBags.html'"></ng-include>
</table>
</td>
</tr>
</table>
Forgot to include charBasic.html :
<tr>
<td>
<table id="charBasic" class="charBasic">
<tr>
<td>{{char.name}}</td>
<td>{{char.race}}</td>
<td>{{char.profession}}</td>
<td>{{char.level}}</td>
<td>{{char.deaths}}</td>
<td>
<table>
<tr ng-repeat="craft in char.crafting">
<td>{{craft.discipline}}</td>
<td>{{craft.rating}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
charBags.html :
<tr>
<td>
<table id="charBags" class="charBags" border="1">
<tr ng-repeat="bag in char.bags">
<td>{{bag.id}}</td>
<td>{{bag.size}}</td>
<td ng-repeat="inv in bag.inventory"><ng-if "{{inv}}">{{inv.id}}</ng-if></td>
</tr>
</table>
</td>
</tr>
As it is, not all inventory arrays are iterated, and the results vary each time
What would be the correct way to iterate this data ?
I found out the problem, it was a duplicate item issue :(
I "solved" it by using track-by $index option inside ng-repeat, which will bypass the problem of duplicate ids.
I am trying to loop through four levels with ng-repeat, but ng-repeat fails after the third level.
How can I use ng-repeat for multiple repeats?
<tbody ng-repeat="company in companies">
<tr>
<td>{{company.name}}</td>
</tr>
<tr ng-repeat-start="child in company.Children">
<td>{{child.name}}</td>
</tr>
<tr ng-repeat-start="child2 in child.Children">
<td>{{child2.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="child3 in child2.Children">
<td>{{child3.name}}</td>
</tr>
<tr ng-repeat-end></tr>
</tbody>
I tried to end both loops like this:
<tr ng-repeat-end></tr>
<tr ng-repeat-end></tr>
However, Angular doesn't check that two loops have to be closed. You can only close one loop and that's my problem.
Your code works totally fine for me, as you can see in this plunker. But errors occured when I tried to use an old angular versions (before v1.2). I did not need to change your code to
<tr ng-repeat-end></tr>
<tr ng-repeat-end></tr>
By using angular smart table, how do i get the result set by using offset value.
For example, I have 100 records in the database
First i need to get 20 records from database and to display only 10 items per page.
After clicking the 3rd page, need to query the database(service call) and get the another 20 records..etc(but no server call for 2nd page)
I am using smart table pipe/ajax plugin to display the records.
How to achieve using this.
<div class="table-container" ng-controller="pipeCtrl as mc">
<table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
<thead>
<tr>
<th st-sort="id">id</th>
<th st-sort-default="reverse" st-sort="name">name</th>
<th st-sort="age">age</th>
<th st-sort="saved">saved people</th>
</tr>
<tr>
<th><input st-search="id"/></th>
<th><input st-search="name"/></th>
<th><input st-search="age"/></th>
<th><input st-search="saved"/></th>
</tr>
</thead>
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.saved}}</td>
</tr>
</tbody>
<tbody ng-show="mc.isLoading">
<tr>
<td colspan="4" class="text-center"><div class="loading-indicator"></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="5" colspan="4">
</td>
</tr>
</tfoot>
</table>
</div>
http://lorenzofox3.github.io/smart-table-website/
code in the Plunker
http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
You need to add st-safe-src="tablecollection" as well as st-table=tablerow
Then,
<tr ng-repeat="row in tablerow">
FMI,
source: Client side pagination not working in smart table
Set the page size to 10.
Maintain a service level array object (var fetchedData) for the fetched rows from the server.
Only call the server if the required amount of data not available in the client side.
Always filter the data for the pagination from fetchedData.
Something like this in your service.
var fetchedData = [];
function getPage(start, number, params) {
if (fetchedData.length < (start + number)) {
//get the next 20 rows from the server and add to fetchedData;
}
var filtered = params.search.predicateObject ?
$filter('filter')(fetchedData, params.search.predicateObject) :
fetchedData;
//rest of the logic
I reduced my code to the smallest version with the error.
The point is, I create a table, the angular way, with an empty array for the Table rows.
After that, I fetch some data, and add it to that same array (with angular.copy)
Even though they are correctly added to the table itself, if I click on a column title to sort it, or try to filter by typing in the input box, the table deletes all the rows.
Could it be a problem with $digest or $apply?
I've created a codepen to reproduce
Codepen
HTML
<table datatable="" dt-options="datatable.dtOptions" dt-column-defs="datatable.dtColumnDefs">
<thead>
<tr><th></th><th>ID</th><th>Comuna</th><th>Proyecto</th></tr>
</thead>
<tbody>
<tr ng-repeat="doc in json">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
Javascript
$scope.json = [];
$scope.Load = function(){
_.each(thaJson.d.results, function(doc, i) {
$scope.json.push(angular.copy(doc))
})
}
You need to set your datatable attribute to "ng" when using Angular Datatables the "angular way"
datatable="ng"
<table datatable="ng" dt-options="datatable.dtOptions" dt-column-defs="datatable.dtColumnDefs">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Comuna</th>
<th>Proyecto</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="doc in json">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
I have created a dynamic table using ngtable , and table data for 3 columns is fetched from json.In that table for 4th column a green/red color circle should come based on connection if successful or not.
The same i have done with javascript(without using json) in which for that 4th column i have set the four different id's,and based on id's i have changed the color using ajax if connection is successful.
In angular using json i m unable to do so , I have created the dynamic table but how to set id's and from where to get the image i'm unable to do.Can anyone help on this.
<table ng-table>
<thead>
<tr>
<th>Feature</th>
<th>DaysUp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>
</table>
You can use scope id and index value to generate unique id. As ng-repeat creates child scope so you will get one scope id(unique id of scope) that id you can attach with $index.
<tr ng-repeat="user in users" id="{{$parent.$id+'-'+$index}}">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
JSFiddle Demo
HTML:
<div ng-app="myapp" ng-controller="myctrl">
<table>
<thead>
<tr>
<td>Name</td>
<td>DaysUp</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.daysup}}</td>
<td><img width="20px" height="20px" ng-src="{{imageurls[user.status-1]}}" /> </td>
</tr>
</tbody>
</table>
</div>
SCript:
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.users =[
{'name':'xyz','daysup':2,'status':1},
{'name':'abc','daysup':4,'status':2},
{'name':'klm','daysup':6,'status':3},
{'name':'yrt','daysup':9,'status':4}
];
$scope.imageurls = [
'http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_yellow_circle.png',
'http://pix.iemoji.com/sbemojix2/0702.png',
'http://clker.com/cliparts/u/g/F/R/X/9/green-circle-md.png',
'http://pix.iemoji.com/sbemojix2/0701.png'
];
});
Plunker Demo