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.
Related
I am getting dynamic content from database and I want to to view index value like..1,2,3,4,5,6,7 and so on.
I am using {{ #index }} and {{ index }} but it is not working for me.
<template name="getDynamic">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>First Name</td>
<td>last Name</td>
<td>Email</td>
<td>password</td>
<td>Gender</td>
<td>Trems</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
{{#each listalltests}} {{> list }} {{/each}}
</tbody>
</table>
</template>
<template name="list">
<tr>
<td> {{#index}} </td> // not working
<td> {{ username }} </td>
<td> {{ lastname }} </td>
<td> {{ email }} </td>
<td> {{ password }} </td>
<td> {{ gender }} </td>
<td> {{ terms }} </td>
<td>[Delete] </td>
<!-- <td>[Update] </td> -->
</tr>
</template>
Is there a way to access array index in spacebars In meteor?
Your list template does not know about #index so you need to pass it to the template.
You need therefore to call it like so
{{ > list index=#index }}
Of course you then need to change your code in the list template to access the item data:
<td>{{index}}</td>
Attached is my code, tried showing td data when the condtion of ng-if is true
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<div ng-repeat="value in data_report"
ng-if="(fellow.F_Id==value.fellowship_id)? (show_row = true) : (show_row=false)">
<td ng-show="show_row">{{value.Completed}}</td>
<td ng-hide="show_row">0</td>
<td ng-show="show_row">{{value.Not_Updated}}</td>
<td ng-hide="show_row">0</td>
<td ng-show="show_row">{{value.Total_schedule}}</td>
<td ng-hide="show_row">0</td>
</div>
</tr>
</tbody>
Its just giving 0 as result. Though data_report is having values
Tried adding span in td with conditions in td and result in span.
still the result is zero
May I know where the logic is going wrong and how it can be achieved?
Changed the code to
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<td>
<span ng-repeat="value in data_report" ng-show ="fellow.F_Id==value.fellowship_id">{{value.Completed}}</span>
</td>
<td>
<span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Not_Updated}}</span>
</td>
<td>
<span ng-repeat="value in data_report" ng-show="fellow.F_Id==value.fellowship_id">{{value.Total_schedule}}</span>
</td>
</tr>
</tbody>
Here i am getting values but how can i set default value to zero if there are no values present?
In your case ng-if returns no boolean
The usage is (DOCs):
<ANY
ng-if="expression">
...
</ANY>
I think you dont need ng-if at all. You can write something like:
<tbody>
<tr ng-repeat="fellow in fellowships">
<td>{{$index}}</td>
<td>{{fellow.Fellowship_Name}}</td>
<div ng-repeat="value in data_report">
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Completed: 0}}</td>
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Not_Updated: 0}}</td>
<td>{{(fellow.F_Id==value.fellowship_id) ? value.Total_schedule: 0}}</td>
</div>
</tr>
</tbody>
Its not best solution, in Javascript you can set for example value.Completed to be by default 0. It will help you to simplify your HTML
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
}
I'm trying to leverage "column" as a number and re-use it to define the "colspan" in the following "td".
<table>
<tr>
<td ng-repeat="column in columns">
{{column}}
</td>
<td colspan="column">
Something
</td>
</tr>
</table>
Not sure if thats what you meant but you can try the following:
<table>
<tr>
<td ng-repeat-start="column in columns">
{{column}}
</td>
<td ng-repeat-end colspan="{{column}}">
Something
</td>
</tr>
</table>
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);
}