How to set id's for dynamic rows in angularjs - angularjs

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

Related

Nested ng-repeat not displaying the correct value

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>

Nested ng-repeat failing on inner loop

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.

Displaying dynamic views for multiple profiles (customers) with AngularJs

I am getting the data for customers and displaying in on table (ng-repeat) on the main page. The main page also has search option which filter the data by a particular customer ID.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
</tr>
</table>
The result I want to reach is that when a user clicks on the customer ID (which is one of the rows on the table displayed), a new view should open, where more details about that particular customer can be seen. I know basics of routing, but I can not get the best way to solve this problem, as there are many customers!
How can I give each customer ID, a different view that shows detail of that customer? What tools does Angular have for that? Just need a rough idea how to approach this problem using AngularJS!
Well you could either redirect user to a 'show' page like so:
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a ng-click="viewCustomer(data.kvk)" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-search"></span></a></td>
</tr>
</table>
then in your controller:
$scope.viewClient = function(id) {
//path to your view using id
};
or else create a hidden table in the same view and show upon button click. I am using bootstrap accordion for sample purposes.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a data-toggle="collapse" data-target="#{{data.kvk}}"></a> </td>
</tr>
<tr>
<td>
<div class="accordion-body collapse" id="{{data.kvk}}">
<!-- your content here -->
</div>
</td>
</table>
hope it helps.

angularjs pagination using smart table

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

How can I bind a repeat to a table using an object literal?

I have this object called ct.items.columns ... and inside I have two strings , "id" and "name" .
And I want to bind in angular to build an dynamic table with two columns.. "id" and "name" from my literal.
I tried this:
<table border ="1">
<tr class="active">
<th ng-repeat = "a in ct.items.columns">
</tr>
</table>
And I get nothing. My controller is set up properly.. I can make other bindings. In the object ct.items I have two properties.. columns and query... and in columns 0 - id and 1-name .
I'm not sure about your object but you can make dynamic table like this.
<div ng-controller="myCtrl">
<table>
<tr>
<th ng-repeat="(heading,val) in ct.items.columns">{{heading}}</th>
</tr>
<tr>
<td ng-repeat="(heading,val) in ct.items.columns">{{val}}</td>
</tr>
</table>
</div>
Working Demo
Hope this helps.
<table border ="1">
<th>
<td>id</id>
<td>name</td>
</th>
<tr class="active" ng-repeat ="item in ct.items.columns">
<th >{{item.id}}</th>
<th >{{item.name</th>
</tr>
</table>

Resources