I was busy making a table with Angular, one row has to look like this:
The problem is i get the same products in one row or only one column in a row. Look:
export class ProductsComponent implements OnInit {
input_product: string;
products = ['kaas', ' prei', 'loempia', 'wcpapier', 'bananen', 'nootjes'];
// products = [];
onClick_addProduct() {
this.input_product = (<HTMLInputElement>document.getElementById('input_product')).value;
this.products.push(this.input_product);
}
constructor() { }
ngOnInit() {
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class="table table-sm table-dark">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products" >
<td >{{product}}</td>
<td >{{product}}</td>
<td >{{product}}</td>
<td >{{product}}</td>
</tr>
</tbody>
</table>
I tried this: Display a Table using Components with Angular 4
but i got problems with the last part: (app-table-row
[character]="ch"
[columns]="columns")
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table>
<tr>
<th *ngFor="let c of columns">{{c}}</th>
</tr>
<tr *ngFor="let ch of characters | async"
app-table-row
[character]="ch"
[columns]="columns">
</tr>
</table>
I think it's a convention error, but I'm not sure...
Is there a easy way to show the products in 4 columns? Because i can't seem to find how to list the products with an index. :(
Id recommend using divs instead of a table, this is not tabular data.
Try this:
<div class="product" *ngFor="let prod of products">
{{prod}}
</div>
And in the CSS:
.product {
width: 25%;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
}
Here is a StackBlitz example
I made a change to the data (Actual objects)
https://stackblitz.com/edit/angular-gwbc2q
Products now looks like this:
products = [{name:"tire1", line:"impressive"},{name:"brand X", line: "economy plus"},
{name:"hard plasticos",line:"urban destroyer"},{name:"happy ride", line:"smooth and sticky"}]
And in Angular:
*ngFor is just a foreach loop: So foreach product in products make a row looks like:
<tr *ngFor="let product of products" >
<td >{{product.line}}</td>
<td >{{product.name}}</td>
</tr>
Related
i have two tables
<table id='standings'>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches'>
<tr id='match1'>
<td id='matchTeam1>Team1</TD>
<td class='score'> 22-31</td>
<td id='matchTeam3>Team3</td>
</tr>
</table>
My goal is to hover over the row with id 'match1' from the second table and have the rows with id 'tableTeam1' and 'tableTeam3' highlighted
1.)
how is this possible by js/css?
2.) How can it be done by using a php database request when
"Select tableTeam1,tableTeam2 from matches where id='match1'"
Thank you so much in advance
Try this:
$('#match1')
.mouseenter(function() {
$('#tableTeam1').addClass('highlighted');
})
.mouseleave(function() {
$('#tableTeam1').removeClass('highlighted');
})
You also need to add some CSS there, like this one:
.highlighted { background-color: red;}
I don't know your data structure but it should be something like that, I think:
...
<tr id="<?php echo $data['column_name']; ?>" <?php echo ($data['column_name'] === 'match1')? 'class="highlighted"' : ''; ?>>
...
Put your team numbers in a data attribute in rows of the matches then it is fairly simple to parse them to match the elements in the other table and toggle a class on them
$('#matches .match-row').hover(function() {
const teams = $(this).data('teams');
teams.forEach(num => $('#tableTeam' + num).toggleClass('active'))
})
tr.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='standings' border=1>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches' border=1>
<tr class="match-row" data-teams="[1,3]">
<td>Team1</td>
<td class='score'> 22-31</td>
<td>Team3</td>
</tr>
<tr class="match-row" data-teams="[2,3]">
<td>Team2</td>
<td class='score'> 55-1 Blowout!</td>
<td>Team3</td>
</tr>
</table>
HTML
<tfoot>
<tr ng-repeat="prop in test" class="success">
<th class="text-right">#{{prop}}</th>
</tr>
</tfoot>
Angularjs
$scope.test = [
$scope.transSummary.total.toFixed(2),
$scope.transSummary.due.toFixed(2)
];
The above generates two of table footer instead of two columns. I did try ng-repeat in the tag th for generating two tg as columns but it does not work.
You can try something like this
https://jsfiddle.net/tufdjk2s/
<tr>
<th ng-repeat="prop in test">{{prop}}</th>
</tr>
I have two objects one contains selected records and another contains selected fields. Now I need to populate the table dynamically by checking the column header name or value.
I referred Populate table with ng-repeat and check matching header data
Completed:
I able to add the headers dynamically to the table/columns.
Working code is in Plunker
HTML
<table class="dataTable no-footer leadTable">
<thead>
<tr role="row">
<th>
<input type="checkbox" ng-model="selectedSObject[key]" class="select_tertiary_selectAll" />
</th>
<th ng-repeat="k in sFields[key]" ng-value="{{k.name}}" style="font-weight: 400; border-right: none; background-color: #0070d2; padding: 10px 18px;">
<div> {{k.label}} </div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" ng-class="odd" ng-repeat="record in value.filtered">
<td>
<input type="checkbox" ng-model="record.checked" />
</td>
<td ng-repeat="(key_1, value_1) in record" style="padding: 10px 18px;">
<div> {{value_1}} </div>
</td>
</tr>
</tbody>
</table>
JS
$scope.sFields = getSFields($scope.sObjectCSVData);
$scope.iterableRecords = getiterableRecords($scope.sObjectCSVData, allRecords)
function getiterableRecords(sCSVData, allRecords) {
var sObjectRecords = {};
if (allRecords) {
Object.entries(sCSVData).forEach(function(key) {
if (sCSVData[key[0]].filtered.length != 0) {
if (sObjectRecords[key[0]]) {
sObjectRecords[key[0]].push(sCSVData[key[0]].filtered)
} else {
sObjectRecords[key[0]] = []
sObjectRecords[key[0]].push(sCSVData[key[0]].filtered)
}
}
});
}
return sObjectRecords
}
function getSFields(sCSVData) {
var fields = {};
Object.entries(sCSVData).forEach(function(key) {
if (sCSVData[key[0]].filtered.length != 0) {
for (var i = 0; i < sCSVData[key[0]].sObjectFields.length; i++) {
if (fields[key[0]]) {
fields[key[0]].push(sCSVData[key[0]].sObjectFields[i])
} else {
fields[key[0]] = []
fields[key[0]].push(sCSVData[key[0]].sObjectFields[i])
}
}
}
});
return fields
}
Need to do:
Now I have to populate the table with the respective values by checking the column name.
I'm working in AngularJS 1.6.9
By adding small changes, Now I can able to populate the table,
The code I followed is as below,
<tbody>
<tr role="row" ng-class="odd" ng-repeat="record in value[0]">
<td>
<input type="checkbox" ng-model="record.checked" />
</td>
<td ng-repeat="k in sFields[key]" style="padding: 10px 18px;">
{{record [k.name]}} </div>
</td>
</tr>
The working code is in the below mentioned plunker,
Populate the table by checking the header name
For ref.
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
Im trying to highlight a table line, but its hard to translate to angular js inside of the directive. Check the pseudo code:
if(highlight.indexOf($index) != -1) set .highlight css class
This is an example of my code:
$scope.highlight = [0,2,3]
.highlight {
color: red;
}
<table class="ui celled table">
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in as track by $index"> <!-- The ng-class needs to be here, but where should i do the verification? -->
<td>{{a}}</td>
<td>{{b[$index]}}</td>
</tr>
</tbody>
</table>
Use ng-class after the ng-repeat:
<tr ng-repeat="a in as track by $index" ng-class="{highlight: highlight.indexOf($index) > -1}">