Develop Reference

How can I sort a table by column in angularjs 1.6?

I am using angularjs 1.6 to build a component based application. How can I sort the table contents by clicking on it's headers? For example, when a user clicks onto 'Contact Name' column header, the table should be sorted by 'Contact Name'. I have the following code:
booking-list-template.html
<a ng-link="['Create']" class="btn btn-primary float-right">New Booking</a>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Contact Name</th>
<th>Contact Number</th>
<th>No of Diners</th>
<th>Table Number</th>
<th>Booking Time</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp"
ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
ng-click="$ctrl.editBooking(booking.bookingId)">
<td>{{booking.contactName}}</td>
<td>{{booking.contactNumber}}</td>
<td>{{booking.numberOfPeople}}</td>
<td>{{booking.tableNumber}}</td>
<td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
<td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
</tr>
</tbody>
</table>
booking-list.component.js
'use strict';
angular.
module('bookingList').
component('bookingList', {
templateUrl: 'booking-list/booking-list.template.html',
controller: ['BookingService','$location',
function (BookingService, $location) {
let self = this;
self.bookings = BookingService.query();
self.orderProp = 'bookingTime';
self.editBooking = function (id) {
$location.path(`/edit/${id}`);
};
self.deleteBooking = function (booking, $event) {
BookingService.delete({ id: booking.bookingId }, function () {
let index = self.bookings.indexOf(booking);
self.bookings.splice(index, 1);
});
if ($event.stopPropagation) $event.stopPropagation();
if ($event.preventDefault) $event.preventDefault();
$event.cancelBubble = true;
$event.returnValue = false;
};
}
]
});

just add sortBy Filter in ng-repeat. Check the below code
New Booking
<table class="table table-striped table-hover">
<thead>
<tr>
<th ng-click="sortVar=!sortVar">Contact Name</th>
<th>Contact Number</th>
<th>No of Diners</th>
<th>Table Number</th>
<th>Booking Time</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp | sortBy: sortVar"
ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
ng-click="$ctrl.editBooking(booking.bookingId)">
<td>{{booking.contactName}}</td>
<td>{{booking.contactNumber}}</td>
<td>{{booking.numberOfPeople}}</td>
<td>{{booking.tableNumber}}</td>
<td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
<td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
</tr>
</tbody>
</table>
Hope it Helps!!

I found the answer by reading the docs.
Heading ##
Sort by = {{$ctrl.orderProp}}; reverse = {{$ctrl.reverse}}
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Contact Name</th>
<th>Contact Number</th>
<th>No of Diners</th>
<th>Table Number</th>
<th>Booking Time</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp:$ctrl.reverse"
ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
ng-click="$ctrl.editBooking(booking.bookingId)">
<td>{{booking.contactName}}</td>
<td>{{booking.contactNumber}}</td>
<td>{{booking.numberOfPeople}}</td>
<td>{{booking.tableNumber}}</td>
<td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
<td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
</tr>
</tbody>
</table>
{
let app = angular.module('app',['ngResource']);
app.factory('BookingSvc',['$resource', function($resource){
return $resource('bookings.json');
}]);
app.component('bookingList', {
templateUrl: 'booking-list.html',
controller: ['BookingSvc', function(BookingSvc){
let self = this;
self.bookings = BookingSvc.query();
self.orderProp = 'bookingTime';
self.reverse = true;
self.sortBy = function(orderProp) {
self.reverse = (self.orderProp === orderProp) ? !self.reverse : false;
self.orderProp = orderProp;
console.log(orderProp);
};
}]
});
}

how to generate blank table rows before filling with ngrepeat

I am relatively new to JavaScript
angular
.module('MainView', ['Utils','ngMaterial'])
.controller('MainCtrl', ['$scope','$timeout','$q','$log' ,function($scope,$timeout,$q,$log) {
var self = this;
self.keychain = null;
self.keychain = [{description:'some description',couponCode:37678 },{description:'some text',couponCode:23478,unitPrice:300.99,totalCost:300.99,actions: 'move' }]
}]);
<div ng-app="MainView" ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th>Description</th>
<th>Coupon Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.stockList track by $index" class="item--{{$index}}">
<td>{{$index + 1}}
</td>
<td class="mdl-textfield__input">
<input value="{{item.qty}}" size="3" maxlength="3" class="" type="number" required />
</td>
<td>{{item.couponCode || 'n/a'}}</td>
<td>{{item.description || 'n/a'}}</td>
<td> <button class="mdl-button mdl-js-button ">
<i class="material-icons">delete</i>
</button></td>
</tr>
</tbody>
</table>
</div>
and angular. I am trying to get a blank scroll-able table which i can then enter data into.How can i do this using ng-repeat.I have been on this for several hours. Any help will be appreciated. thanks.

You should initialize your stocklist with empty values
vm.stockList = [
{qty: null, couponCode: null, description: null},
{qty: null, couponCode: null, description: null},
]

I can not run your code snippet and you are using stockList <--!--> keychain.
So the first thing i see is that your input uses value="{{item.qty}}" whereas you should use ng-model="item.qty"
see https://docs.angularjs.org/api/ng/directive/input

Here it's working. You missed out angular file. And so many unwanted codes.
angular.module('MainView', [])
.controller('MainCtrl', ['$scope' ,function($scope) {
var self = this;
self.keychain = null;
self.keychain = [{description:'some description', couponCode:37678 },
{description:'some text',couponCode:23478,unitPrice:300.99,totalCost:300.99,actions: 'move' }];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="MainView">
<table ng-controller="MainCtrl as vm">
<thead>
<tr>
<th>Description</th>
<th>Coupon Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.keychain" class="item">
<td>{{$index + 1}}
</td>
<td class="mdl-textfield__input">
<input size="3" maxlength="3" class="" type="number" required />
</td>
<td>{{item.couponCode}}</td>
<td>{{item.description}}</td>
<td> <button class="mdl-button mdl-js-button ">
<i class="material-icons">delete</i>
</button></td>
</tr>
</tbody>
</table>
</div>

angular-datatables: How to retrieve selected row data for Editing/Delete

I have a edit button and delete button in every rows in the table. I want to find out which row data I have selected when I clicked on to the edit/delete button so that I could do the editing/delete and then update it into my database.
Could anyone guide me out on this?
app.js
app.controller('trackingController', function(....) {
var scope = $scope;
scope.dtInstance = {};
scope.persons = {};
// create a message to display in our view
scope.message = 'Welcome to Tracking Page';
console.log("Tracking");
scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [0, 'asc']);
scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
$resource('data.json').query().$promise.then(function(persons) {
scope.persons = persons;
});
scope.deleteRow = function() {
console.log("deleteRow");
scope.log = 'You are trying to deleteRow the row: ';
}
scope.editRow = function() {
console.log("edit");
scope.log = 'You are trying to edit the row: ';
}
});
index.html
<p class="text-danger"><strong>{{ log }}</strong></p>
<table class="table table-striped table-bordered" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" dt-instance="dtInstance">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="editRow();"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteRow();"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>

In case you need to know which person is being clicked
app.controller('trackingController', function(....) {
var scope = $scope;
scope.dtInstance = {};
scope.persons = {};
// create a message to display in our view
scope.message = 'Welcome to Tracking Page';
console.log("Tracking");
scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [0, 'asc']);
scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
$resource('data.json').query().$promise.then(function(persons) {
scope.persons = persons;
});
scope.deleteRow = function(person) {
console.log(person);
scope.log = 'You are trying to deleteRow the row: ';
}
scope.editRow = function(person) {
console.log(person);
scope.log = 'You are trying to edit the row: ';
}
});
<p class="text-danger"><strong>{{ log }}</strong></p>
<table class="table table-striped table-bordered" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" dt-instance="dtInstance">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn" ng-click="editRow(person);"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" class="btn btn-default btn" ng-click="deleteRow(person);"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</td>
</tr>
</tbody>
</table>

How do I generate nested table in one column if it has list of values using angular js?

index.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1>
<thead>
<tr>
<th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td>
</tr>
</tbody>
</table>
It gives me perfect table but problem is in one column MyValues.
I have list of data and want to create nested table with all List value.
How can I achieve this? Want to check if any column has List if yes
then generate nested table.
check this plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

You write your markup this way:
<table>
<thead>
<tr>
<th ng-repeat="(k,v) in data[0]">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
<table ng-if="isArr">
<thead>
<tr>
<th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sub in value">
<td ng-repeat="(sk, sv) in sub">{{sv}}</td>
</tr>
</tbody>
</table>
<span ng-if="!isArr">{{value}}</span>
</td>
</tr>
</tbody>
</table>
Full code: https://gist.github.com/anonymous/487956892d760c17487c

I'm not really sure what you want to render, but this might give you some ideas.
see: http://plnkr.co/edit/znswagx45a2F7IThdQJn?p=preview
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj){
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1>
<thead>
<tr>
<th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">
<div ng-if="value[0].Id">
<table>
<tr>
<td>Id:</td><td>{{value[0].Id}}</td>
</tr>
<tr>
<td>Value:</td><td>{{value[0].Value}}</td>
</tr>
</table>
</div>
<div ng-if="!(value[0].Id)">
{{value}}
</div>
</td>
</tr>
</tbody>
</table>
If you need to be more general, maybe instead of <div ng-if="value[0].Id"> you could do something like <div ng-if="angular.isArray(value)">. I didn't have time to try and get that working though, but something to look into.

How to add alphabetical column sorting to a table using AngularJS

Essentially I need to add a little button or something within the headers of the table to be able to sort the data alphabetically by column. I've been having trouble with doing this making use of AngularJS and need some help with it.
This is a snippet showing the table and...
<div class="col-md-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Status</th>
<th>Ref</th>
<th>Service</th>
<th>Domain</th>
<th>Service Owner</th>
<th>Stage</th>
</tr>
</thead>
<tbody>
<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProp">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td><u>{{x.c}}</u></td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is a plnkr of the code http://plnkr.co/edit/OkRbR9geeOcCGy2K01jB?p=preview

Give this a try for a very simple solution:
HTML:
<table>
<thead>
<tr>
<th>Status<a ng-click="orderProperty = 'a'">^</a></th>
<th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
<th>Service<a ng-click="orderProperty = 'c'">^</a></th>
<th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
<th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
<th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in projects | orderBy:orderProperty">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
</tbody>
</table>
JavaScript:
app.controller('controller', function($scope) {
$scope.orderProperty = "f"; // Sort by "f" by default
$scope.projects = [...];
});
Working jsFiddle here: http://jsfiddle.net/ben1729/3nxykbhk/