I have an array called "design", with dynamic length. I want to show all the elements of this array in more cells of a table. I write this code:
<tr style="cursor:pointer" data-ng-repeat="i in [0,1,2,3,4,5]">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ design[$index] }}</td>
</tr>
but I want to repeat data for i in [0, . . . , design.length], not to 5. Length of design is not 5, but it change dynamically
You should be able to do (if no duplicates in design):
<tr style="cursor:pointer" ng-repeat="obj in design">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ obj }}</td>
</tr>
Or (if duplicates in design):
<tr style="cursor:pointer" ng-repeat="obj in design track by $index">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ obj }}</td>
</tr>
Solved in this way:
<tr style="cursor:pointer" ng-repeat="i in getNumber(design.length) track by $index">
<td ng-click="changePath(dispensercategory.dispenser.iddispenser)"> {{ design[$index] }}</td>
</tr>
And in my js file:
$scope.getNumber = function(num) {
return new Array(num);
}
Related
I need to create a table based in two loops. I have tried the following:
<tbody *ngIf="testCases">
<tr class="pointer" *ngFor="let car of cars; let bike of bikes">
<td class="center">{{car?.id}}</td>
<td class="center">{{bike?.id}}</td>
</tr>
</tbody>
I know the I get the data because I have tried it in typescript with console.log but when I display it in HTML I print null for bike
You can use <ng-container>. It is a helper element that allows to use *ngFor, *ngIf, or other structural directives but doesn't actually create HTML content.
<ng-container *ngFor="let car of cars">
<tr class="pointer" *ngFor="let bike of bikes">
<td>{{car.id}} {{bike.id}}</td>
</tr>
</ng-container>
If both have same no of records , you can do it like
<tr class="pointer" *ngFor="let car of cars; let i = index;">
<td class="center">{{cars[i]?.id}}</td> // or <td class="center">{{car?.id}}</td>
<td class="center">{{bikes[i]?.id}}</td>
</tr>
In your typescript code you can do this:
vehicles = (<any[]>cars).concat(<any>[bikes]);
And then in your view you can bind it easily like:
<tr class="pointer" *ngFor="let vehicle of vehicles">
<td *ngIf="vehicle.vehicleType === 'car'" class="center">{{vehicle.id}} is car</td>
<td *ngIf="vehicle.vehicleType === 'bike'" class="center">{{vehicle.id}} is bike</td>
</tr>
You cannot use on the same line, try it as separate rows
<tbody *ngIf="testCases">
<tr class="pointer" *ngFor="let car of cars ">
<td class="center">{{car?.id}}</td>
</tr>
<tr class="pointer" *ngFor="let bike of bikes">
<td class="center">{{bike?.id}}</td>
</tr>
</tbody>
EDIT
if you want on the same row use index which will hold the array value
<tr class="pointer" *ngFor="let car of cars; let x = index;">
<td class="center">{{cars[x]?.id}}</td>
<td class="center">{{bikes[x]?.id}}</td>
</tr>
I'm building a dynamic table using angular2 using *ngFor as below, but I'm not able to see data. I'm not sure {{x[col]}} is correct, any idea?
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>
You need to traverse each row in the inner loop.
Try:
<tr *ngFor="let rows of exportList">
<td *ngFor="let col of rows">
{{col}}
</td>
</tr>
<tr *ngFor="let x of exportList">
<td *ngFor="let col of x">
{{col}}
</td>
</tr>
you simply need to replace cols with x. exportList contains numbers of object.so in x you will get one object in each loop.By using object,you can fetch each field.
Is it possible to populate a table with angular.js without defining the column names prior to the 'ng-repeat'? For example this is how I'm currently populating the table..
<table class="table">
<thead>
<tr>
<th>Arup Mnemonic</th>
<th>Organism</th>
<th>Test</th>
<th>Result</th>
<th>Source</th>
<th>Source Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{ x.Arup_Mnemonic }}</td>
<td>{{ x.organism }}</td>
<td>{{ x.test }}</td>
<td>{{ x.result }}</td>
<td>{{ x.source }}</td>
<td>{{ x.source_value }}</td>
</tr>
</tbody>
</table>
Is it possible to remove all the hard coding and have the scope variable determine the column names along with and data ?
Quick Edit:
heres a quick look at the data in its current state.. I need the key in the key:value elements of this object. Is there a way to get those values with pure javascript ?
My understanding is that you don't know what the columns are beforehand. So, you need the keys of the first object to understand what the columns are.
angular:
var obj = data[0];
$scope.columns = Object.keys(obj).filter(function(key) {
if (obj.hasOwnProperty(key) && typeof key == 'string') {
return key;
}
});
$scope.format = function(str) {
return str.replace('_',' '); //do the rest of the formatting here.
}
html:
<table class="table">
<thead>
<tr>
<td ng-repeat="column in columns">
{{format(column)}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="datum in data">
<td ng-repeat="column in columns">
{{datum[column]}}
</td>
</tr>
</tbody>
</table>
Edit: Took the filter on the keys from another answer as good practice when getting keys from objects.
Why not use a own model for your headlines to iterate through it?
Let headlines be an array, holding up all possible headlines, one for each index.
<table class="table">
<thead>
<tr ng-repeat="headline in headlines">
<th>{{ headline }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{ x.Arup_Mnemonic }}</td>
<td>{{ x.organism }}</td>
<td>{{ x.test }}</td>
<td>{{ x.result }}</td>
<td>{{ x.source }}</td>
<td>{{ x.source_value }}</td>
</tr>
</tbody>
</table>
A possible solution (please note that this is not tested):
// in controller
$scope.headlines = Object.keys(data[0]).filter(function(key) {
if (data[0].hasOwnProperty(key) && typeof key == 'string') {
return key;
}
});
<tr data-ng-repeat="(key,val) in gridData">
<th></th>
<th data-ng-repeat="col in columns" data-ng-init="CurrKey = col.key">{{val[CurrKey]}}
</th>
</tr>
I want to use the if-directive in vue.js to determine which datafield should be shown in each table row:
<tr v-repeat="model">
<td>#{{ title }}</td>
<td>#{{ publish_date_start }}</td>
<td v-if="model.publish = 1"><span class="fa fa-check"></span></td>
<td v-if="model.publish = 0"><span class="fa fa-remove"></span></td>
<td class="data-list-action">edit</td>
<td class="data-list-action">delete</td>
</tr>
If the value of the property 'publish' is 1, the datafield with the check has to be shown. If 0, it has to be the a cross.
How can I compare 'model.publish' to a value?
UPDATE: Fiddle
Try with v-if:
<td v-if="publish"><span class="fa fa-check">Check</span></td>
<td v-if="!publish"><span class="fa fa-remove">Cross</span></td>
Fiddle: http://jsfiddle.net/8wy7w560/3/
I need to add extra HTML tags within an angularjs loop like so:
<div ng-repeat="fixture in fixtures.fixtures ">
<tr>
<th class="date" colspan="5">{{fixture.date | cmdate:'MM/dd/yyyy'}}</th>
</tr>
<tr>
<td>{{teamName(fixture.homeTeam) }}</td>
<td> {{score(fixture.goalsHomeTeam)}}</td>
<td>-</td>
<td>{{score(fixture.goalsAwayTeam)}} </td>
<td>{{teamName(fixture.awayTeam)}}</td>
</tr>
</div>
however no data is retrieved when I do that, if I have it coded as follows it does work:
<tr ng-repeat="fixture in fixtures.fixtures ">
<td>{{fixture.date | cmdate:'MM/dd/yyyy'}}</td>
<td>{{teamName(fixture.homeTeam) }}</td>
<td> {{score(fixture.goalsHomeTeam)}}</td>
<td>-</td>
<td>{{score(fixture.goalsAwayTeam)}} </td>
<td>{{teamName(fixture.awayTeam)}}</td>
</tr>
what would be the problem?