My aim is to get the table to display data like the one below. I manage to display the years on top and first vertical column(company) down but how do I get yield data for each company and display it in each row? ps. I am very new to angular.
<table>
<thead>
<tr><th></th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th></tr>
</thead>
<tbody>
<tr><td>ABC</td><td>2.03</td><td>2.22</td><td>2.44</td><td>2.57</td><td>2.69</td></tr>
<tr><td>DEF</td><td>1.08</td><td>1.14</td><td>1.19</td><td>1.25</td><td>1.32</td></tr>
</tbody>
</table>
JSON
{
"years":[
2015,
2016,
2017,
2018,
2019
],
"yields":[
{
"company":"ABC",
"yield":{
"2015":2.03000,
"2016":2.22000,
"2017":2.44000,
"2018":2.57000,
"2019":2.69000
}
},
{
"company":"DEF",
"yield":{
"2015":1.08000,
"2016":1.14000,
"2017":1.19000,
"2018":1.25000,
"2019":1.32000
}
}
]
}
HTML
<table data-ng-controller="dividendController as divd">
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in year">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in divYield">{{n}}</td>
</tr>
</tbody>
</table>
CONTROLLER
(function (angular) {
'use strict';
angular.module('example', [])
.controller('dividendController', function ($scope, $http) {
$http.get("api/myapi/myexample")
.success(function (response) {
$scope.year = response.years;
$scope.yields = response.yields;
$scope.divYieldList = [];
$scope.company = [];
angular.forEach(response.yields, function (obj, index) {
$scope.company.push(obj.company);
$scope.divYield = [];
angular.forEach(obj.yield, function (yld, index) {
$scope.divYield.push(yld);
});
$scope.divYieldList.push($scope.divYield);
});
});
});
})(window.angular);
<div ng-init='TesData={"years":[2015,2016,2017,2018,2019],"yields": [{"company":"abc","yield":{"2015":2.03000,"2016":2.22000,"2017":2.44000,"2018":2.57000,"2019":2.69000} },{"company":"def","yield":{"2015":1.08000,"2016":1.14000,"2017":1.19000,"2018":1.25000,"2019":1.32000}}]};'>
<table>
<thead>
<tr>
<th></th>
<th data-ng-repeat="y in TesData.years">{{y}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in TesData.yields">
<td>{{c.company}}</td>
<td data-ng-repeat="n in c.yield">{{n}}</td>
</tr>
</tbody>
</table>
</div>
Related
I am new for both Angular and datatable.
I am creating ASP.NET MVC Application using this two js and want to display records in the table.
Table displays the records but searching and sorting facility is not available I mean not running. I don't know how to integrate both to use in one page.
Can anyone help me to come out from this problem?
Code:
I have $scope.Customers which has fields Name, Phone , Email and more...
$scope.getCustomers = function () {
customerService.GetCustomers()
.then(
function (response) {
console.log("Get Customer call");
$scope.Customers = response.data.Result;
}
);
}
Here I got the list of customers and binded successfully and my HTML code is:
<table id="tblcustomers" class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
output:
angular module:
var app;
(function () {
app = angular.module("ANG", []);
})();
The DataTable.js filter data after the document is rendered completely.
Use DataTables settings after the document is rendered completely.
see demo here:
var app = angular.module('app', []);
app.directive('testTable', function($timeout) {
return {
restrict: 'A',
link: function() {
$timeout(function() {
$('#tblcustomers').DataTable();
});
}
}
});
var testCtrl = app.controller('testCtrl', function($scope) {
$scope.Customers = [];
var i = 20;
while (i > 0) {
$scope.Customers.push({
CustomerName: 'test' + i,
Adddress_Line_1: 'testAddr' + i,
Phone: '000-000-00' + i,
Email: 'sample' + i + '#xxx.com',
IsActive: true
});
i--;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTable test for Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
<table id="tblcustomers" test-table class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
have you troed something like to put in a directive the datatables initialization?
something like:
"use strict";
angular.module("ANG")
.directive("grid", ["$timeout", function ($timeout) {
return {
restrict: "EA",
link: function (scope, element, attrs) {
$timeout(function () {
$(element).DataTable();
}, 200);
}
}
}]);
and then use it like:
<table id="tblcustomers" grid class="table table-striped table-condensed table-bordered no-margin">
<thead>
<tr>
<th>Customer Name</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<th>Active</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in Customers track by $index">
<td>{{cust.CustomerName}}</td>
<td>{{cust.Adddress_Line_1}}</td>
<td>{{cust.Phone}}</td>
<td>{{cust.Email}}</td>
<td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td>
<td ng-if="cust.IsActive == false"><span class="icon-close"></span></td>
<td><span class="icon-trash"></span></td>
</tr>
</tbody>
</table>
Controller
app.controller('myController', ['$scope', 'dashboardService', 'DTOptionsBuilder', function ($scope, dashboardService, DTOptionsBuilder) {
$scope.dtMasterOptions =
DTOptionsBuilder.newOptions()
.withDisplayLength(10)
.withOption('bLengthChange', true)
.withPaginationType('full_numbers')
.withBootstrap();
$scope.ViewData = function () {
var getData = dashboardService.getAllSubmitted();
getData.then(function (job) {
$scope.submitedjob = job.data;
},
function (response) { document.write(response.status + "<br/>" + response.data); });
}
}]);
html code
<table style="width:100%;" ng-controller='myController'>
<tr>
<td align="center" style="padding:25px;" ng-init=" ViewData();">
<table datatable="ng" dt-options="dtMasterOptions" class="table table-striped table-bordered" ng-cloak>
<thead>
<tr>
<th class="text-danger" style="width:5%;">S. No.</th>
<th style="width:10%;">Applicant ID</th>
<th style="width:15%;">Email</th>
<th style="width:15%;">Full Name</th>
<th style="width:10%;">Contact No</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in submitedjob" ng-if="x.SubmittedStatus==='Submitted'">
<td>{{$index + 1}}</td>
<td>{{x.ApplicantID}}</td>
<td>{{x.Username}}</td>
<td>{{x.Salutation}} {{x.Firstname}} {{x.Middlename}} {{x.Lastname}}</td>
<td>{{x.Mobile}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Here before data loads completely message show 'No data table avaliable'
So I want to show Loading message instead of 'No data avaliable' Message before my data load in datatable completely
add withOption('processing', true) to your DTOptionsBuilder.newOptions() and it should show Loading message.
I created a table using angular. Some rows in the table have child rows with the same properties as parent. I want to create the child rows whenever the user clicks on the parent row (parent rows would have a carrot sign that specifies there are some child rows). I am really new to angular and I need to see an example so that I can understand how it happens in angular. can anybody help?
here is my html:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="student in students">
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in children">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
the "hasChildren" cell would have a carrot sign which will collapse and expand the children rows.
here is the js file:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http({
method: 'GET',
url: contextPath + '/students'
})
.then(function (response) {
var students = response.data;
$scope.students = students;
});
$scope.getChildren = function(student){
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
var children = response.data;
$scope.children = children;
});
}
})
Take a look on that approach
<table>
<tbody ng-repeat="parent in parents">
<tr>
<td>
Parent ...
</td>
</tr>
<tr ng-show="SomeCarrotCondition(parent)" ng-repeat="child in parent.children">
<td>
Child...
</td>
</tr>
</tbody>
</table>
Code sample:
$scope.getChildren = function(student) {
studen.expanded = !student.expanded; // expand/collapse items
if (student.children) { // request a server only once to get the children
return;
}
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
student.children = response.data; // fill student children collection
});
}
HTML sample:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody data-ng-repeat="student in students">
<tr>
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in student.children"
ng-show="student.expanded">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to get the data from a json without keys in to a table.
[
[
"valu10", //row1 col1
"valu11", //row1 col2
"valu12",
"valu13"
],
[
"valu20",
"valu21",
"valu22",
"valu23"
],
[
"valu30",
"valu31",
"valu32",
"valu33"
]
]
In my success block I was getting the data in alert box. How can I get these data in the angular table. I tried doing the following,
........
}).success(function(data, status, headers, config) {
var log = [];
var data1 = angular.fromJson(eval(data));
var rowList = data1;
$scope.rows = rowList;
}).error(function(data, status, headers, config) {
alert("error");
});
in html:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in rows">
{{item}}
</tr>
</tbody>
</table>
I've created a JSFiddle for you, hope that it will help you:
https://jsfiddle.net/oronbdd/h4sor3w4/1/
Angualr controller:
var app = angular.module('plunker', []);
app.factory('myService', function($http) {
return {
async: function() {
return $http.get('https://api.myjson.com/bins/368hv');
}
};
});
app.controller('MainCtrl', function( myService,$scope) {
$scope.data = "oron";
myService.async().then(function(d) {
$scope.data = d.data;
});
});
HTML:
<div ng-app="plunker">
<div ng-controller="MainCtrl">
JSON:{{data}}<br>
<br/>
ANSWER:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="x in data">{{$index}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="array in data">
<td ng-repeat="item in array">
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
I have a table which prints data from a JSON. Every row have an delete option.
I want to print the deleted data into a new table. I have managed to print data in console but unable to add it into view.
Below is the code:
Controller
$scope.deletedItems = [];
var counter = 0
$scope.removeRow = function (idx) {
console.log(idx);
$scope.TTNdata.splice(idx, 1);
var deletedArray = $scope.TTNdata.slice(idx, 1);
//console.log(deletedArray);
$scope.deletedItems.push(deletedArray);
console.log($scope.deletedItems);
counter++;
$('#counter').html(counter);
};
View:
<table id="deleted-rows" class="">
<thead>
<th>Sr. No</th>
<th>ID</th>
<th>First Name</th>
<th>Second Name</th>
<th>Gender</th>
<th>Email</th>
<th>Image</th>
<th>Remove</th>
</thead>
<tbody>
<tr ng-repeat="item in deletedItems | orderBy:'id'">
<td>{{$index+1}}</td>
<td>{{item.id}} </td>
<td>{{item.first_name}}</td>
<td>{{item.last_name}}</td>
<td>{{item.gender}}</td>
<td>{{item.email}}</td>
<td><img src="{{item.photo}}" alt="{{item.first_name}} {{item.last_name}} photo"></td>
<td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
</table>
<table class="table bordered">
<thead>
<tr>
<th>Sr. No</th>
<th>ID</th>
<th>First Name</th>
<th>Second Name</th>
<th>Gender</th>
<th>Email</th>
<th>Image</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in TTNdata | filter:bindtext | orderBy:'id'">
<td>{{$index+1}}</td>
<td>{{data.id}} </td>
<td>{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.gender}}</td>
<td>{{data.email}}</td>
<td><img src="{{data.photo}}" alt="{{data.first_name}} {{data.last_name}} photo"></td>
<td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
</table>
Data is printing in console but not in table, every time i click remove it will generate a blank row in deleted table
What I am doing wrong?
Code on github https://github.com/sahilpopli/learningAngular.git
slice returns array, so try $scope.deletedItems.push(deletedArray[0]);
Or try to concatenate the arrays by doing so: $scope.deletedItems = $scope.deletedItems.concat(deletedArray);
A possible thing that you may need to think is that if you going to have paged tables, removing the object from a list with that index could not be a good thing.
My solution to your problem would be this(using the id instead of index). This is just scratch demonstrating a possible way to achieve what is your desire.
Code
angular.module('App', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.List = [{
Id: 1,
Name: 'Name1'
}, {
Id: 2,
Name: 'Name2'
}, {
Id: 3,
Name: 'Name3'
}];
$scope.newList = [];
var remove = function(itemId) {
var indexS = $scope.List.filter(function(item, index) {
return item.Id == itemId;
});
if (indexS.length == 1)
$scope.newList.push($scope.List.splice($scope.List.indexOf(indexS[0]), 1)[0])
};
$scope.removeMe = remove;
}]);
Markup
<body ng-app="App" ng-controller="MyCtrl">
<table>
<thead>
<th> Id </th>
<th> Name </th>
</thead>
<tbody>
<tr ng-repeat="item in List">
<td >{{item.Id}}</td>
<td >{{item.Name}}</td>
<td ng-click="removeMe(item.Id)">removeme</td>
</tr>
</tbody>
</table>
<table>
<thead>
<th> Id </th>
<th> Name </th>
</thead>
<tbody>
<tr ng-repeat="item in newList">
<td >{{item.Id}}</td>
<td >{{item.Name}}</td>
</tr>
</tbody>
</table>
Plunker