I want have a multi language view with an ngTable. For do that, i set in my controller a $scope.translate (a valid json) who contains my traductions. In my view i want set my data-title like {{translate.code}} etc...
my view :
<table ng-table="tableParams" class="table ng-table-responsive">
<tr ng-repeat="product in $data">
<td data-title="'{{translate.code}}'" > <!-- display : {{translate.code}} -->
{{product.code}}
</td>
<td data-title="['translate.reference']" > <!-- display : empty -->
{{product.reference}}
</td>
<td data-title="'Label'" >
{{product.label}}
</td>
<td data-title="'Size'" ng-show="manageSizeColor == true">
{{product.size}}
</td>
<td data-title="'Quantity'" >
<ac-quantity minquantity="1" cquantity="product.quantity"></ac-quantity>
</td>
<td data-title="'Price'">
<b>{{product.price + currency}}</b>
</td>
</tr>
</table>
If you're using angularjs ~1.2 with angular-translate ~2.6.1, translation on data-title works like this:
<td data-title="'MY_TRANSLATION_ID' | translate" >
{{product.reference}}
</td>
I' ve finally found how do this, with this example :
https://github.com/esvit/ng-table/issues/53
<td data-title="translate['reference']" >
{{product.reference}}
</td>
where translate is the scope variable and ['reference'] is the property
you can also do this :
<td data-title="getColumnName('your.translate.code')">{{ resultat.number }}</td>
with in your controller :
$scope.getColumnName = function(column) {
return $translate.instant(column);
}
Related
I need to bind data with row values to a table, when i'm using the data-ng-repeat-start and data-ng-repeat-end data is not binding correct format.
<table id="tbl">
<tbody>
<tr data-ng-repeat="data in RDetails" data-ng-if="Values(data)">
<td data-ng-repeat-start="d in data.Dtls" data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-repeat-end="d in data.Dtls" data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
when I use the above condition table showing the same values how can i do this. Where i did mistake please help me on this Please see image here i am getting repeated values.
If I understand your problem correctly - just presenting content of every RDetails.Dtls element as a table row - here is solution:
<table id="tbl">
<tbody data-ng-repeat="data in RDetails">
<tr data-ng-repeat="d in data.Dtls" data-ng-if="Values(data)">
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
<tbody ng-repeat="obj1 in personalProfileCtrl.workArray">
<tr>
<td class="tg-llyw">{{obj1.role}}</td>
<td class="tg-llyw">{{obj1.name}}</td>
<td class="tg-llyw" colspan="2">
{{obj1.start_date}} -{{obj1.end_date}}
</td>
</tr>
<tr ng-repeat="obj2 in personalProfileCtrl.workAchievementsArray"
ng-if="obj2.place=='{obj1.name}'">
<td class="tg-0pkys">{{obj2.title}}</td>
<td class="tg-0pky" colspan="6">
{{obj2.achievements_description}}
</td>
</tr>
</tbody>
This line of code is not working ng-if="obj2.place=='{obj1.name}'"
Here profileCtrl is controller
workAchievement is array of object
workArray is also a array of object
You do not need to add the extra '{}' to the obj1.name, so ng-if="obj2.place==obj1.name" should work fine.
<tr ng-repeat="obj2 in personalProfileCtrl.workAchievementsArray"
̶n̶g̶-̶i̶f̶=̶"̶o̶b̶j̶2̶.̶p̶l̶a̶c̶e̶=̶=̶'̶{̶o̶b̶j̶1̶.̶n̶a̶m̶e̶}̶'̶"̶
ng-if="obj2.place == obj1.name">
<td class="tg-0pkys">{{obj2.title}}</td>
<td class="tg-0pky" colspan="6">
{{obj2.achievements_description}}
</td>
</tr>
how to execute below type code in angular js
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>`
This is your code
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists">{{ 'x.'+ z.field }} </td>
</tr>
Use bracket notation for the property accessor:
<!--
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ 'x.'+{{z.field}}} </td>
</tr>
-->
<tr ng-repeat="x in gLists" >
<td ng-repeat="z in gfLists" >{{ x[z.field] }} </td>
</tr>
Bracket notation first evaluates the contents of the brackets and uses that as the identifier of the desired property.
Here is my html table
<table>
<tbody>
<tr class="unread" ng-repeat="CU in InboxList">
<td class="text-right mail-date">{{CU.time}}</td>
</tr>
<tr class="read">
<td class="text-right mail-date">12:00 pm</td>
</tr>
</tbody>
</table>
here in my html table there are two tr class one is tr class="read" and other is class="unread" I have already binded tr class="unread".now I want to check a condition if {{cu.isread=0}} then tr class read will bind otherwise tr class unread will bind.how to do this?
You could do this with ng-class
Example:
ng-class="(cu.isread === 0) ? 'unread' : 'read'"
You can achieve this using ng-class:
<tr ng-class="{'read' : cu.isread === 0, 'unread': cu.isread !== 0}">...</tr>
You can do something like this:
<table>
<tbody>
<tr data-ng-class="{unread: cu.isread == 0, read: cu.isread !=0}" ng-repeat="CU in InboxList">
<td class="text-right mail-date">{{CU.time}}</td>
</tr>
<tr class="read">
<td class="text-right mail-date">12:00 pm</td>
</tr>
</tbody>
</table>
I am trying to index my ng-repeat so that I can edit a row by making the one with text disappear and the one with inputs appear.
<div ng-controller="BusinessGoalsCtrl">
<table class="table table-hover">
<tr>
<th>Type:</th>
<th>Timeframe:</th>
<th>Goal:</th>
<th>Edit:</th>
</tr>
<tr ng-class="editMode ? 'ng-hide' : ''" ng-repeat="details in businessGoalDetails track by $index">
<td style="width:30%;">{{details.display_name}} {{$index}}</td>
<td style="width:30%;">{{details.timeframe}}</td>
<td style="width:30%;">{{details.threshold}}</td>
<td style="width:10%;"><i ng-click="toggleEdit(true, $index)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-class="editMode ? '' : 'ng-hide'" ng-repeat="inputs in businessGoalDetails track by $index">
<td style="width:30%;"><input ng-model="inputs.display_name"/></td>
<td style="width:30%;"><input ng-model="inputs.timeframe"/></td>
<td style="width:30%;"><input ng-model="inputs.threshold"/></td>
<td style="width:10%;"><i ng-click="toggleEdit(false, $index)" class="fa fa-check"></i></td>
</tr>
</table>
</div>
Angular Code
$scope.editMode = false;
$scope.details = 0;
$scope.toggleEdit = function (showEdit, $index) {
console.log("editing view");
$scope.editMode = showEdit;
}
You could probably just use ng-if/ng-show instead of ng-class and use ng-repeat-start/end instead of creating 2 different ng-repeats. Also you could just make a single row editable by setting property on its child scope or on the object under iteration. In your code you are setting the property editMode at the parent scope level and not only that it is not specific to each row.
<tr ng-show="!details.editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=true" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="details.editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=false" class="fa fa-check"></i></td>
</tr>
Or
<tr ng-show="!editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(true)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(false)" class="fa fa-check"></i></td>
</tr>
and
$scope.toggleEdit = function (showEdit) {
this.editMode = showEdit; //'this' here is the child scope
}