is there any way to highlight a particular table row?
I have a table and a set if angular codes for example for example:
angular.module('myApp', []).controller('myTest', function($scope) {
var data = [];
for(var i = 0; i < 10; i++) {
data[i] = i;
}
$scope.data = data;
});
HTML:
<table ng-app="myApp" ng-controller="myTest">
<tr ng-repeat="x in data">
<td > {{ x }} </td>
</tr>
</table>
http://jsfiddle.net/omarjmh/Lvc0u55v/1895/
Is there anyway to do it like
if x is equal to 1
then
css:highlight tr: blue
?
Thanks!
you can use $even and $odd for this.
angular.module('myApp', []).controller('myTest', function($scope) {
var data = [];
for(var i = 0; i < 10; i++) {
data[i] = i;
}
$scope.data = data;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myApp">
<div ng-controller="myTest">
<table >
<tr ng-repeat="x in data" ng-style="{'background-color': ($even ? 'green' : 'red')}">
<td > {{ x }} </td>
</tr>
</table>
</div>
</div>
use ngStyle:
tr ng-repeat="x in data" ng-style="{'background-color': (x === 1 ? 'blue' : 'white')}"
You can achieve it by using CSS,
tr:nth-child(even) {
background-color: #000000;
}
even/odd both works.
Or with angular,
You should be using the angular directives ngClassEven and ngClassOdd for this.
Have a look at the documentation section for how to use them
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassOdd
Related
I am having an array which looks something like this,
var object = [ "ABCD" , "EFGH" , "IJKL", "MNOP", "QRST", "UVWX" ];
$scope.object = object;
I want to use ng-repeat to make a table and each row in table should consist of 3 columns.
The table should look like this,
Name Numb Type
ABCB EFGH IJKL
MNOP QRST UVWX
This is what my table looks like,
<thead>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</thean>
<tr ng-repeat = "x in object">
<td>{{x}}</td>
</tr>
I am not able to maintain 3 items per row here.
To do this you will simply need to update $scope.object with a nested array of size 3, so that we can print the first three items in each row like:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];
// Update array to size of three items instead like
var size = 3;
$scope.object = [];
for (var i = 0; i < object.length; i += size) {
$scope.object.push(object.slice(i, i + size));
}
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in object">
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
<td>{{x[2]}}</td>
</tr>
</tbody>
</table>
</div>
</section>
If you wan to make td also dynamic, you can use ng-repeat for table cells also like:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];
// Update array to size of three items instead like
var size = 3;
$scope.object = [];
for (var i = 0; i < object.length; i += size) {
$scope.object.push(object.slice(i, i + size));
}
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in object">
<td ng-repeat="cell in row">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
</section>
You can solve it by the view side:
<thead>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</thean>
<tr ng-repeat = "x in object" ng-if="$index % 3 === 0">
<td>{{object[$index]}}</td>
<td ng-if="object[$index + 1]">{{object[$index + 1]}}</td>
<td ng-if="object[$index + 2]">{{object[$index + 2]}}</td>
</tr>
I am writing an Angular application and I have an old code i want to convert this angular js code to angular
table.html
<table ng-repeat="group in vm.groups" style="float: left">
<thead>
<tr>
<th><b>Sl. No</b></th>
<th><b>Generated Code</b></th>
</tr>
</thead>
<tr ng-repeat="g in group.values">
<td ng-style="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{$parent.$index * 10 + $index + 1}}</td>
<td ng-style="$odd ? {'background': 'lightgrey' } : {'background': 'white' }">{{g.value}}</td>
</tr>
</table>
table.ts
app.controller('Ctrl', function() {
var vm = this;
var items = [{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'}];
vm.groups = [];
var i,j,temparray,chunk = 10;
for (i=0,j=items.length; i<j; i+=chunk) {
temparray = items.slice(i,i+chunk);
vm.groups.push({values: temparray});
}
});
i Want to convert this code to Angular2+. I am new to angular please help me.
Angular 2 onwards you should use *ngFor directive to loop over array.
so , your component.html should look like below :
<table *ngFor="let group of groups; let i=index">
<thead>
<tr>
<th><b>Sl. No</b></th>
<th><b>Generated Code</b></th>
</tr>
</thead>
<tr *ngFor="let g of group.values; let x=index" [ngClass]="(x%2===0)?'even':'odd'">
<td>{{i * 10 + x + 1}}</td>
<td>{{g.value}}</td>
</tr>
</table>
Below is the Angular 8 conversion of your code : demo
I have a table in AngularJS with several columns that can each be sorted ascending and descending. I want a row to be selected whenever a user clicks on it. I do this by getting the selected index of the table. However, once I resort one of the columns, the selected row remains highlighted. What I want to do is to keep the previously selected item highlighted...whereever its new index may be after the resorting. Here is a code snippet:
My table body:
<tbody>
<tr
ng-class="{'selected':$index == list.selectedRow}"
ng-repeat="item in list.itemList | order:list.orderBy:list.orderAsc">
<td ng-click="list.select(item);list.setClickedRow($index)">{{ item.number }}
</td>
<td ng-click="list.select(item);list.setClickedRow($index)">{{ item.name }}
</td>
</tr>
</tbody>
The method for setting the selected row:
function setClickedRow(index) {
vm.selectedRow = index;
}
Based on Slonski answer, I suggest you to loop over all items to set selected = false when you change your selection:
function setClickedRow(item) {
for(var i = 0; i < $scope.list.itemList.length; i++) {
if(item == $scope.list.itemList[i]) item.selected = true;
else $scope.list.itemList[i].selected = false;
}
item.selected = true;
}
Update: Solution without a loop
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.setMaster = function(section) {
$scope.selected = section;
}
$scope.isSelected = function(section) {
return $scope.selected === section;
}
}]);
.active {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="i in ['One', 'Two', 'Three']" ng-class="{active : isSelected(i)}">
<td ng-click="setMaster(i)">{{i}}</td>
</tr>
</table>
<hr> {{selected}}
</div>
You can add selected to your item, and the set it to true on click (or set it to !item.selected if you want to toggle selection on click)
<tbody>
<tr
ng-class="{'selected':item.selected}"
ng-repeat="item in list.itemList | order:list.orderBy:list.orderAsc">
<td ng-click="list.select(item);list.setClickedRow(item)">{{ item.number }}
</td>
<td ng-click="list.select(item);list.setClickedRow(item)">{{ item.name }}
</td>
</tr>
</tbody>
function setClickedRow(item) {
item.selected = true;
}
I am trying to build a simple 24 hour timeline table that looks like this
-00:00
-
-00:30
-
-01:00
-
-01:30
-
...
I have been fiddling with something like...
<table>
<tr ng-repeat="t in _.range(0, 24) track by $index">
<td>{{$index % 2 === 1 ? '-' : ( t | leadingzero : 2)}}</td>
</tr>
<table>
Obviously this doesn't work. Can someone please provide a better solution? Thanks!
Try this solution:
(function(angular) {
'use strict';
var myApp = angular.module('app', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.ranges = function(from, to){
var res = [];
for(var i = from; i < to; i++)
res.push((i > 9 ? "" : "0") + i + ":00");
return res;
}
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="app">
<div ng-controller="TestController">
<table>
<tbody>
<tr ng-repeat-start="range in ranges(0, 24)">
<td>-{{range}}</td>
</tr>
<tr ng-repeat-end ng-if="$index!=23">
<td>-</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I want to create a table with products on a certain menu of a store.
The table is divided by categories (product categories) and for every category the desired products should be shown under his category.
Something like:
I am able to get the different categories in my html but when I want to use ng-repeat on table rows or table headers I get nothing...
<table class="table table-hover">
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-app="categories" ng-cloak="" ng-controller="category" ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
AngularJS
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
for(var i = 0; i < $scope.categories.length; i++){
var categories = $scope.categories[i];
}
});
});
What is going wrong here?
Try this following code:
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
var categorie = results.data;
for(var i = 0; i < categorie.length; i++){
$scope.categories = categorie[i];
}
});
});
I found the solution myself:
<table ng-app="categories" ng-cloak="" ng-controller="category">
<tr>
<th>Menu items</th>
</tr>
<tr ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
You shouldn't have ng-repeat of on your ng-app & ng-controller div. Even you don't need to do for loop. You categories does have category in it. You can access those inside ng-repeat using c only no need to specifying any index in it.
Markup
<body class="table table-hover" ng-app="categories" ng-cloak="" ng-controller="category" >
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-repeat="c in categories">
<th>{{c}}</th>
</tr>
</table>
</body>