Combining two ng-repeats in a table - angularjs

I want do use two different ng-repeat loops in a table to kind of group different obejcts with each other but don't know really how to do it.
My code right now:
...
<tbody>
<tr ng-repeat="person1 in Array1">
<td>{{ person1.address }}</td>
<td>{{ person1.city}}</td>
<td>{{ person1.email}}</td>
</tr>
<tr ng-repeat="person2 in Array2">
<td>{{partner2.address }}</td>
<td>{{partner2.city}}</td>
<td>{{partner2.email}}</td>
</tr>
</tbody>
...
The result/table i'm aiming for:
person1[1].address | person1[1].city | person1[1].email
---------------------------------------------------------------
person2[1].address | person2[1].city | person2[1].email
---------------------------------------------------------------
person1[2].address | person1[2].city | person1[2].email
---------------------------------------------------------------
person2[2].address | person2[2].city | person2[2].email
---------------------------------------------------------------
That is, i'd like to the ng-repeat to out put person1[1] and person2[1] before putting out person1[2].
Is the solution to add an outer array, containing my two current arrays or are there any better solution?
best regards

Assuming you could ensure that your array had no null values and were the same length, you could use this technique:
Create a new array initialized to the length of the two other arrays and iterate on this to get $index.
Put your ng-repeat on the body ( you can have multiple body elements in a table).
You'd get something like this:
var counterArray = new Array(array1.length);
<tbody ng-repeat="item in counterArray">
<tr>
<td>{{ Array1[$index].address }}</td>
<td>{{ Array1[$index].city}}</td>
<td>{{ Array1[$index].email}}</td>
</tr>
<tr >
<td>{{ Array2[$index].address }}</td>
<td>{{ Array2[$index].city}}</td>
<td>{{ Array2[$index].email}}</td>
</tr>
</tbody>
It might be safer to use a getter function on those arrays also:
getData(index,array,value)
Where you can prevent any null errors from occurring.

Related

How to subsititute a property name in an angularjs expression with a string

Given a set of columns specified by a user. Which will be contained within displayColumns i.e. ['value1', 'value2', 'value3'] i want to iterate over this set of values to provide me with the correct reference to each value in the model.
I don't know what the syntax is for substituting the column name into an expression so that when angular compiles it, it would look like -> {{device.name.value1.value.value}} ... I've tried [] but that obviously didn't work!
<tbody md-body>
<tr md-row ng-repeat="device in $ctrl.devices track by device.mRID">
<td md-cell ng-click="$ctrl.detailedView($event, device)">{{device.aliasName}}</td>
<td md-cell>{{device.mRID}}</td>
<td md-cell ng-repeat="column in $ctrl.displayColumns">{{device.name.[column].value.value}} {{device.name.[column].unit.symbol}}<td>
</tr>
</tbody>
This is called bracket notation:
{{device.name[column].value.value}} {{device.name[column].unit.sybmol}}
Not this:
{{device.name.[column].value.value}} {{device.name.[column].unit.sybmol}}

Applying a class more programmatically

My project renders a lot of tables with financial data, and one of the requirements is that positive numbers are green and negative numbers are red (along with a couple of other stylizations). I have classes for doing this ("gain" and "loss"), and I know that I can apply them conditionally with ng-class, but the repetitiveness of doing so makes me feel that perhaps there might be a way similar to a filter where I can just apply the check repeatedly, without having to actually spell it out every time.
I could cheat and use a filter to wrap the output in a span with the class, but that would effectively break filter chaining, so I won't be doing that.
A section of the table might look like:
<tr>
<td ng-repeat="month in report" ng-class="{ loss : month.gross < 0, gain: month.gross > 0 }">{{ month.gross | currency }}</td>
</tr>
<tr>
<td ng-repeat="month in report" ng-class="{ loss : month.net < 0, gain: month.net > 0 }">{{ month.net | currency }}</td>
</tr>
<tr>
<td ng-repeat="month in report" ng-class="{ loss : month.profit < 0, gain: month.profit > 0 }">{{ month.profit | currency }}</td>
</tr>
Is there a way to abstract out the ng-class="{ loss: x < 0, gain: x > 0 }" or am I just stuck repeating it? I have similar cases where I'm checking even more than two cases, but this is definitely the more common situation.

updating ng-repeat list on adding data locally in angularjs

I have a table that displays the list of data from websql local database.Onclick of add Button list of doctors are provided to add to the database.The adding is done but problem is that i am not able to update the datalist and see the added record.After page refreshing i could see the added record.Can anybody plz help me here.I am posting my code below.The html view template is as follows:
<table class="table table-hover" >
<tr>
<th>DOCTOR</th>
<th>SPECIALITY</th>
<th>PATCH</th>
<th>CLASS</th>
<th> </th>
</tr>
<tr ng-repeat="doc in listDoctors">
<td>{{ doc.contactName }}</td>
<td>{{ doc.speciality }}</td>
<td>{{ doc.townName }}</td>
<td>{{ doc.class }}</td></tr></table>
Now controller does:
//displays list of doctors
$scope.listDoctors = [];
readData.transaction(sqlDoctorDetails,0)
.then(function (data) {
$scope.listDoctors=data;
});
adds the data to database
$scope.AddToList = function() {
var db = openDatabase("database");
db.transaction(function(tx) {
tx.executeSql(insertStatement);
});
Please help me to improve the code to update the list on adding new entry into the database.
sqlDoctorDetails and insertStatement are my query variables for displaying and inserting data respectively.
In the AddToList function push the latest doctor details which will update the list as well
So whenever you click on the add button and call a controller function:
$scope.addDoctorToDB(doctorDetail){
//add it to the doctor's list
$scope.listDoctors.push(doctorDetail);
//Now do the db operation say calling your add function
this.AddToList();
}
My Angular knowledge is rusty but I think after you insert into the DB you need to either insert to the in-memory model listDoctors or trigger the sqlDoctorDetails query to read the updated data into listDoctors.
Angular observes your model for changes but it doesn't observe the DB behind the model.

AngularJS: Currency Formatting. Change fraction size, thousands separator and fraction separator

I wish to show prices in a specific table within my site to 3 decimal places.
Prices will be shown in Pounds, Dollars and Euros.
My currency filter seems to automatically round the price to 2 decimal places.
Also, if the currency is in Euros, Ideally, I would like to auto change the thousands separator to a . and decimal separator to a ,.
Does angularjs have support for this?
The View
<div ng-controller="SpotController">
<table class="header-table-spot-prices">
<thead>
<tr><th>Spot Prices</th><th>Price</th></tr>
</thead>
<tbody>
<tr ng-repeat="spot in spots">
<td>{{ spot.item }}</td>
<!-- This needs to be 3dp -->
<td>{{ spot.price | currency:spot.currency }}</td>
</tr>
</tbody>
</table>
</div>
This is probably irrelevant at this point since the original post was 2 years ago, but angular's "currency" filter takes in a symbol and a fraction size as parameters.
For example:
<td>{{ spot.price | currency:spot.currency : 3 }}</td>
Would output what you are looking for without the caveat of changing the separators based on currency. You could either create your own currency filter that first uses the angular filter, then checks the condition and alters the separators. This plunker illustrates that.
.filter('myCurrency', ['$filter', function($filter){
return function(input, symbol, fractionSize){
input = $filter('currency')(input, symbol, fractionSize);
if(symbol === '\u20AC'){
var tempString = "###";
input = input.replace(",", tempString).replace(".", ",").replace(tempString, ".");
}
return input;
}
}])
You've probably already solved this for your needs, but putting the answer here just in case anyone else is running into a similar issue and comes across this post.

xquery to order with header values in the way

Can you partially order xml data types using an xquery when the logical columns aren't consistent (such as when there are headers in the first row(s))?
Edit Had a bad example, mislead answers away from original question. How could I order the typ column values, leaving the th headers at top? Or vice versa, ordering by the integer column rts instead?
Say I have this XML stored in an mssql XML field (select thexml from xmldata returns one row containing the following):
<table cellpadding="2" cellspacing="3" border="1">
<tr>
<th>typ</th>
<th>rts</th>
</tr>
<tr>
<td>ABC</td>
<td>26</td>
</tr>
<tr>
<td>DCC</td>
<td>21</td>
</tr>
<tr>
<td>DBB</td>
<td>4</td>
</tr>
<tr>
<td>XBQ</td>
<td>152</td>
</tr>
<tr>
<td>AHI</td>
<td>349</td>
</tr>
</table>
Now say I want to sort this by the HTML column typ. I'm looking for the following result:
<table cellpadding="2" cellspacing="3" border="1">
<tr>
<th>typ</th>
<th>rts</th>
</tr>
<tr>
<td>ABC</td>
<td>26</td>
</tr>
<tr>
<td>AHI</td>
<td>349</td>
</tr>
<tr>
<td>DBB</td>
<td>4</td>
</tr>
<tr>
<td>DCC</td>
<td>21</td>
</tr>
<tr>
<td>XBQ</td>
<td>152</td>
</tr>
</table>
Any XQuery experts who can break this down for me?
To sort on a particular column, reconstruct the table and then sort on non header rows:
SELECT thexml.query('
element table {
/table/#*,
/table/tr[th], (: copy header :)
for $r in /table/tr[not(th)] (: exclude header :)
order by $r/td[1] (: $r/td[2] to sort on rts col :)
return $r
}')
FROM xmldata

Resources