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}">
Related
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>
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>
I'm trying to figure out what I am doing wrong here. For some reason angular will build out the div structure 10 times because there are 10 items in $scope.aggregators. However it doesn't build out the TR structure at all?
<div class="info-pane" ng-controller="CatalogCtrl">
<table id="records">
<thead>
<tr>
<th><span>Vendor Code</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="aggregator in aggregators}">
<td>{{aggregator.vendor_code}}</td>
</tr>
</tbody>
</table>
<div ng-repeat="aggregator in aggregators">
</div>
remove } from ng-repeat="aggregator in aggregators}"
I have a table that contains multiple columns and rows. When viewing on a small screen(phone) i want to hide some of those columns, otherwise show all columns.
The data inside my table is populated using a repeat. As i re-use the table in multiple places i would like to keep the repeat as the column and row count is different.
<table md-table class="md-data-table" id="data-table">
<thead md-head md-order="gridCtrl.gridModel.orderBy">
<tr md-row>
<th md-column ng-repeat="header in gridCtrl.gridModel.headers" md-order-by="fields[{{$index}}].value">
{{header.title}}
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in gridCtrl.gridModel.items | orderBy: gridCtrl.gridModel.orderBy | limitTo: gridCtrl.gridModel.itemsPerPage : (gridCtrl.gridModel.firstPage -1) * gridCtrl.gridModel.itemsPerPage">
<td md-cell ng-repeat="field in item.fields">
<div ng-if="gridCtrl.isLink(field)">
<h4 class="blue-link" id="gridFieldString{{field.value | idfy}}" ng-click="gridCtrl.click($event, field)">
{{field.value}}
</h4>
</div>
<div ng-if="!gridCtrl.isLink(field)">{{field.value}}</div>
</td>
</tr>
</tbody>
</table>
you can use
window.screen.availHeight
window.screen.availWidth
to get the current resolution.
Then add a ng-hide with screen resolution or
<tr md-row ng-hide="window.screen.availHeight < 500 && window.screen.availWidth <200">
You need to read media queries and define rules according to screen width
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have a input with an autocomplete with angularjs. This autocomplete is from a json that is represented by a table in a dropdown. I can filter the results and click the correct value but i would check if the user type some value that is not in the dropdown with an error message. Here is the code:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
Nav item - Works OK
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The angularjs part
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}
I created a fiddle here:
http://jsfiddle.net/8y48q/22/
You can use
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
Fiddle