Develop Reference

How do i put the serial number in each table row while using {{#each}} loop in handlebars?

I am creating a table to show list of items from the database, but how do I put the serial No. for the list when using an {{#each}} loop:
<table class="table mt-5">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Title</th>
<th scope="col">Category</th>
<th scope="col">Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
{{#each products}}
<tr>
<th scope="row">1</th>
<td>{{this.Name}}</td>
<td>{{this.Category}}</td>
<td>{{this.Description}}</td>
<td><img style="width:100px" src="/product-images/{{this._id}}.png" alt="Img"></td>
</tr>
{{/each}}
</tbody>
</table>
This is the table I am using. In the <th> tag I have written 1. I want to replace it with the sl. no. This is an .hbs file and I am using Node.js and MongoDB as database.
How can I do it?

Handlebars provides a data-variable, #index, for getting the index of current item in an #each iteration. However, like JavaScript arrays, #index is 0-based, so your result would be 0, 1, 2, ... - which is not what you asked for. To use #index, the impacted line in your template would become:
<th scope="row">{{#index}}</th>
If you require your serial numbers to start a 1 it will require a little more work. There is nothing out-of-the-box from Handlebars that will allow us to add 1 to #index. We would need to write a custom helper, a very simple one. For example:
helpers: {
increment(num) {
return num + 1;
}
}
And then our template would become:
<th scope="row">{{increment #index}}</th>
Here is an example fiddle for reference.
My feeling about this approach is that it is excessive to add a helper for such a simple purpose. I would recommend adding a SerialNumber property to each Product before it is passed to the template, before the res.render() call. It would look something like:
products.forEach((product, index) => {
products[index].SerialNumber = index + 1;
});
This way, the SerialNumber will be available to each Product in your template:
<th scope="row">{{this.SerialNumber}}</th>

Internationalization of dynamic content in Angular?

Angular.io describes the i18n tag as follows:
The Angular i18n attribute marks translatable content. Place it on
every element tag whose fixed text is to be translated.
So my question is this. What if I have an element whose content is dynamic? Take for example this below table that shows a list of assets. The column, "Description" needs to be in some cases English, and in some cases some other language.
<table class="asset-table">
<thead>
<tr>
<th i18n="##alarm-list-timeon">Time On</th>
<th i18n="##alarm-list-timeoff">Time Off</th>
<th i18n="##alarm-list-asset">Asset</th>
<th i18n="##alarm-list-description">Description</th>
</tr>
</thead>
<tbody *ngIf="showAssets">
<tr *ngFor="let asset of pageItems">
<td>{{asset.timeon}}</td>
<td>{{asset.timeoff}}</td>
<td>{{asset.assetlabel}}</td>
<td i18n>{{asset.description}}</td>
</tr>
</tbody>
</table>
I was thinking something like this:
<table class="asset-table">
<thead>
<tr>
<th i18n="##alarm-list-timeon">Time On</th>
<th i18n="##alarm-list-timeoff">Time Off</th>
<th i18n="##alarm-list-asset">Asset</th>
<th i18n="##alarm-list-description">Description</th>
</tr>
</thead>
<tbody *ngIf="showAssets">
<tr *ngFor="let asset of pageItems">
<td>{{asset.timeon}}</td>
<td>{{asset.timeoff}}</td>
<td>{{asset.assetlabel}}</td>
<td i18n="##{{asset.description}}">{{asset.description}}</td>
</tr>
</tbody>
</table>
...but I was mistaken. Any suggestions?

First, the i18n value is an ID, so it would always be static.
Second, as far as translating content that changes, the only success I have had is a workaround using NgSwitch in the template.
In this example, thingStatus is your variable, and its possible values are 'good', 'bad', and 'unknown'. All of these would each be a separate translation item, with its own i18n ID value.
Obviously, this would fail if thingStatus could have an unmanageable number of possibilities.
<div [ngSwitch]="thingStatus">
<p *ngSwitchCase="good" i18n="status_good>Good</p>
<p *ngSwitchCase="bad" i18n="status_bad>Bad</p>
<p *ngSwitchCase="unknown" i18n="status_unknown>Unknown</p>
</div>

Use this construction
<span
i18n="status text|Status text##statusText"
>{
asset.statusLangCode, select,
bad {Bad}
good {Good}
other {Unknown}
}</span>
And in translation file there will be generated a construct like this (target is added manually)
<source>{VAR_SELECT, select, good {Good} bad {Bad} other {Unknown}}</source>
<target>{VAR_SELECT, select, good {Хороший} bad {Плохой} other {Неизвестный}}</target>
For more info see https://angular.io/guide/i18n#translate-select

Assuming that your backend service returns known possible values, you can do the following:
const values = ['admin', 'teacher', 'librarian']
Add the translated values to sv_SE.json given the previous values as keys
role: {
"admin": "admin",
"teacher": "lärare",
"librarian": "Bibliotekarie"
}
Call the translation in your app.component.html
<div *ngFor="let value of values">
{{ ('role.' + value) | translate }}
</div>

ng-click function not recognzing changes inside table data

i created a table with one editable column. i want users to be able to save changes in this column cells, but though the call executes and sends the correct data before the change, it won't recognize changes in the table after data loaded.
this is how i create table:
<table class="table table-bordered table-hover" ng-controller="tableCtrl"
ng-controller="Ctrl">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
</thead>
<tbody ng-repeat="(user_id, row) in data | filter:search">
<tr ng-repeat="(script_id, cron_format) in row ">
<td ng-model="user_name">{{user(user_id)}}</td>
<td ng-model="script_name">{{script(script_id)}}</td>
<td ng-model="cron_format">
<span contenteditable="true"
ng-repeat="l in letters(cron_format) track by $index"
>{{l}}</span>
<button class="save"
ng-click="saveCron(user_id,script_id,cron_format)">save</button></td>
</tr>
</tbody>
</table>
the result is this table:
and cron format is editable. but when i call saveCron(user_id,script_id,cron_format)
it sends the values initialized the table.
this is the saveCron function:
$scope.saveCron = function(userId,scriptId,cronFormat){
$.post("updateCronChange.php","user_id=userId&script_id=scriptId&cron=cronFormat", function(data){
//function gets correct params
document.getElementById("demo").innerHTML = userId + scriptId +cronFormat;
});
}
how can i make it send the modified cron_format after end user changed it? thanks..

Angular JS object as ng-model attribute name

I'm creating a dynamic angular js application wherein I want to use a textbox as a searchtext for the filter of a table. Here's a preview on what I am doing:
As of now, my code looks like this
<table>
<thead>
<tr class="filterrow">
<td data-ng-repeat="col in items.Properties">
<input id="{{col.DatabaseColumnName}}" type="text"
data-ng-model="search_{{col.DatabaseColumnName}}"/>
<!-- Above Here I want to dynamically assign the ng-model based on Databasecolumnname property-->
</td>
</tr>
<tr>
<th data-ng-repeat="col in items.Properties">{{col.ColumnTitle}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="content in items2.Contents | filter: search_{{col.DatabaseColumnName}}: search_{{col.DatabaseColumnName}}">
<td data-ng-repeat="col in items.Properties">
{{content[col.Databasecolumnname ]}}
</td>
</tr>
</tbody>
</table>
I already tried the approach of using $compile but I wasn't able to implement it. Any ideas in an approach? Thanks!
EDIT: Plnkr - plnkr.co/edit/5LaRYE?p=preview

You can do this by setting a base object for your ng-Models. So in your controller you will have:-
$scope.search = {};
and in your view do:-
<input ng-attr-id="{{col.DatabaseColumnName}}" type="text"
data-ng-model="search[col.DatabaseColumnName]"/>
With this your dynamic ng-model will be assigned to the search base object, ex:- if col.DatabaseColumnName is col1 then ngModel would be $scope.search.col1

How do I use ng-repeat when the dynamic key value is an array

In my controller , i have the data like...
data = {
chartTypes":["pie","donut","bar","line"],
"features":{
"stacked": ["true","true","true","false"],
"percentage":["false","false","true","false"]
}
};
$scope.docStructure = data
Is there any way that i can user ng-repeat to iterate over the keys and again iterate if the value is an array?
<div ng-app="chartFeatures" ng-controller="chartFeaturesCtrl" style="height:200px; background:red;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th> </th>
<th ng-repeat="chartType in docStructure.chartTypes">{{chartType}}</th>
</tr>
<tr ng-repeat="(feature,supportedList) in docStructure.features">
<td>{{feature}}</td>
<td ng-repeat="supported in supportedList">{{supported}}</td>
</tr>
</table>
</div>
The ideas is I wanted to do a cross tab as below.
Example:

You just need to add track by $index to the ng-repeat on the td tag
<td ng-repeat="supported in supportedList track by $index">{{supported}}</td>
Here's a demo
You could also convert your "features" arrays to contain objects instead of primitives, and then you don't need the track by $index
Here's a demo of that.