I have a table of users. When I click on a user name , it has to display a bootstrap modal . But once i close the modal , the table page is locked and I'm not able to click on any other user's name . The page is locked .
The code be like ,
<!DOCTYPE html>
<html>
<head>
<title>TAble</title>
<style>
table, th{
border: 1px solid Green;border-collapse : collapse;
margin:25px;
text-align:center;
}
td {
border: 1px solid Green;
}
th{
padding: 5px;
Font-size:110%;
}
</style>
</head>
<body ng-app="myApp">
<script src="1.4.8/angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="angular-animate.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.js"></script>
<script src="ng-table.js"></script>
<link rel="stylesheet" href="ng-table.min.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<body ng-app="myApp">
<div ng-controller="tableController">
{{test}}
<table ng-table="usersTable" style="width:85%" class="table table-striped">
<tr ng-repeat="x in data" >
<td data-title="'Id'" filter="{ Id: 'number'}">
<a ng-click='open(x)'>{{x.id}}</a>
</td>
<td data-title="'First Name'">
{{x.first_name}}
</td>
<td data-title="'Last Name'">
{{x.last_name}}
</td>
<td data-title="'e-mail'" >
{{x.email}}
</td>
<td data-title="'Country'">
{{x.country}}
</td>
<td data-title="'IP'" >
{{x.ip_address}}
</td>
</tr>
</table>
</div>
</body>
<script>
var app = angular.module('myApp',['ngTable','ui.router','ngAnimate', 'ui.bootstrap']);
app.controller('tableController',function($scope,$uibModal,$filter,ngTableParams)
{
$scope.customers = [{"id":1,"first_name":"Philip","last_name":"Kim","email":"pkim0#mediafire.com","country":"Indonesia","ip_address":"29.107.35.8"},
{"id":2,"first_name":"Judith","last_name":"Austin","email":"jaustin1#mapquest.com","country":"China","ip_address":"173.65.94.30"},
{"id":3,"first_name":"Julie","last_name":"Wells","email":"jwells2#illinois.edu","country":"Finland","ip_address":"9.100.80.145"},
{"id":4,"first_name":"Gloria","last_name":"Greene","email":"ggreene3#blogs.com","country":"Indonesia","ip_address":"69.115.85.157"},
{"id":50,"first_name":"Andrea","last_name":"Greene","email":"agreene4#fda.gov","country":"Russia","ip_address":"128.72.13.52"}];
$scope.usersTable = new ngTableParams({ },
{
getData: function ($defer, params) {
count:[],
$scope.data = params.filter() ? $filter('filter')($scope.customers, params.filter()) : $scope.data;
$defer.resolve($scope.data);
}
});
$scope.localID=0;
$scope.count=2;
$scope.open = function(w) {
var modalInstance = $uibModal.open({
animation: true,
template: '<h1>Hello</h1>',
controller: 'ModalInstanceCtrl',
backdrop:false,
keyboard:true,
size:'Lg',
resolve: {
customers: function () {
return w;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance,customers) {
$scope.data = customers;
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
</script>
</html>
Found the Solution . I was using angularjs1.4.8 so this problem occured ! I tried using AngularJS 1.5.3 and it worked properly !
Related
var myApp = angular.module("problemApp", []);
myApp.controller("RESTCall", function ($scope, $compile, $element, $timeout) {
$scope.username = 'Adan';
console.log($scope.username)
$scope.printValue = function(data) {
$timeout(function () {
$scope.$apply(function(){
console.log(data);
});
});
}
});
table td, th{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div ng-app="problemApp">
<div ng-controller="RESTCall">
<form name="covertToProForm" id=
"table-print">
<table id="confirm">
<tr>
<th>Firstname</th>
<td contentEditable ng-keyup="printValue(username)" ng-model="username">{{username}}</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
</tr>
</table>
</form>
</div>
</div>
I have the above table which has a td, that has contentEditable attribute. On editing td's value, I want to print its value in console. Any help would be appreciated!
Edited snippet with the given answer. It's not working.
Please disregard my previous answer. The whole thing is we need to wrap contenteditable in a custom directive because contenteditable directive does not not work directly with angular's ng-model just because it re-render the dom element on every change, resulting in loosing the recent ng-model change.
here's a new wrapper around contenteditable
var app = angular.module('app', []);
app.directive('contenteditable', function() {
return {
restrict: "A",
require: 'ngModel',
controller: function($scope) {
$scope.username = 'Adan';
$scope.printValue = function() {
console.log($scope.username);
}
},
link: function(scope, element, attrs, myController) {
element.on('keyup', function() {
scope.$apply(updateViewModel);
});
function updateViewModel() {
var htmlValue = element.text()
myController.$setViewValue(htmlValue);
scope.printValue();
}
myController.$render = updateHtml
function updateHtml() {
var viewModelValue = myController.$viewValue
element.text(viewModelValue);
}
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.7" data-semver="1.2.7" src="https://code.angularjs.org/1.2.7/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div>
<h2>{{username}}</h2>
<form>
<table>
<tr>
<th>Firstname</th>
<td contenteditable ng-model="username">{{username}}</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
</tr>
</table>
</form>
</div>
</body>
</html>
this is my html code where i rendered all json data from .js file but getting
TypeError: Cannot convert undefined or null to object
at Function.keys ()
at DocMeasure.measureNode (pdfmake.js:15647)
at DocMeasure.measureDocument (pdfmake.js:15635)
at LayoutBuilder.tryLayoutDocument (pdfmake.js:15088)
at LayoutBuilder.layoutDocument (pdfmake.js:15076)
at PdfPrinter.createPdfKitDocument (pdfmake.js:2130)
at Document._createDoc (pdfmake.js:82)
at Document.getDataUrl (pdfmake.js:177)
at Document.open (pdfmake.js:109)
at l.$scope.openPdf (app.js:29)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="pdfmake.js"></script>
<script type="text/javascript" src="vfs_fonts.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="raj.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
</head>
<body ng-app="pdfDemo">
<div ng-controller="pdfCtrl">
<div id="pdfContent">
<table id="example-table">
<thead>
<th>firstName</th>
<th>lastName</th>
<th>Gender</th>
<th>Mobile</th>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>{{emp.firstName}}</td>
<td>{{emp.lastName}}</td>
<td>{{emp.gender}}</td>
<td>{{emp.mobile}}</td>
</tr>
</tbody>
</table>
</div>
<button ng-click="openPdf()">Open Pdf</button>
<button ng-click="downloadPdf()">Download Pdf</button>
</div>
</body>
</html>
You can use pdfmake, to export the pdf
DEMO
var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.data= [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];
$scope.export = function(){
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="listController">
<div id="exportthis">
{{data}}
</div>
<button ng-click="export()">export</button>
</div>
</body>
</html>
Here is the code to export HTML table to EXcel, CSV, Pdf, Doc
https://plnkr.co/edit/HmKBjYmJNjp8mPzIlg52?p=preview
<body ng-controller="MainCtrl">
<p>Export HTML Table to Excel, Pdf, CSV and Doc</p>
<table class="export-table" style="width: 100%; margin-top: 20px">
<thead>
<tr>
<th>Employee ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in reportData">
<td>{{item.EmployeeID}}</td>
<td>{{item.LastName}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.Salary}}</td>
</tr>
</tbody>
</table>
<hr>
Export CSV<br/><br/>
Export Excel<br/><br/>
Export Doc<br/><br/>
Export Pdf<br/><br/>
I've used this:
https://github.com/MrRio/jsPDF
and then you can use in your controller like this:
$scope.HTMLclick = function () {
var pdf = new jsPDF();
pdf.addHTML(($("#pdfContent")[0]), { pagesplit: true }, function () {
pdf.save('myfilename' + '.pdf');
});
};
FOR ANGULAR
STEP 1: npm install jspdf-autotable
or in index.html into <head></head> add: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js">
STEP 2:in Angular-cli.json add:
"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],
STEP 3: app.component.ts or any other component aff below imports
import { Component } from '#angular/core';
declare var jsPDF: any;
STEP 4: For test put in your component:
export class AppComponent {
title = 'app works!';
public columns: string[] = ['Name', 'Phone', 'Whatsapp'];
public data: string[] = ['Diego Venâncio', '79999565796', '79912345678'];
constructor() {
var doc = new jsPDF('p', 'pt');
doc.autoTable(columns, data);
doc.save("table.pdf");
}
}
more details?
Best and feasible way is to use window.print() function. Which does not require any library
Pros
1.No external library require.
2.We can print only selected parts of body also.
3.No css conflicts and js issues.
4.Core html/js functionality
---Simple add below code
CSS to
#media print {
body * {
visibility: hidden; // part to hide at the time of print
-webkit-print-color-adjust: exact !important; // not necessary use
if colors not visible
}
#printBtn {
visibility: hidden !important; // To hide
}
#page-wrapper * {
visibility: visible; // Print only required part
text-align: left;
-webkit-print-color-adjust: exact !important;
}
}
JS code - Call below function on btn click
$scope.printWindow = function () {
window.print()
}
Note: Use !important in every css object
Example -
.legend {
background: #9DD2E2 !important;
}
I have a table with the rows populated by Angular.
I'm wondering if there is a "better" way of specifying the class for each row than in the javascript dataset? The classes tr1 and tr2 set an alternating background color for the table rows.
<!doctype html>
<html ng-app="store">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('store', []);
app.controller('storeController', function() {
this.gems = dataArray;
});
var dataArray = [{
name: 'diamond',
trClass: 'tr1',
}, {
name: 'ruby',
trClass: 'tr2',
}, {
name: 'sapphire',
trClass: 'tr1',
}, {
name: 'emerald',
trClass: 'tr2',
}];
})();
</script>
<style>
.tr1 {
background-color: yellow;
}
.tr2 {
background-color: white;
}
</style>
</head>
<body ng-controller="storeController as products">
<table border="1">
<tr ng-repeat="gem in products.gems" class="{{ gem.trClass }}">
<td>{{gem.name}}</td>
</tr>
</table>
</body>
</html>
You could use ng-class-odd and ng-class-even to alternately apply your classes.
Yo can change class like as-
<table border="1">
<tr ng-repeat="gem in products.gems" ng-class="{$index%2==0?'tr2':'tr1'}">
<td>{{gem.name}}</td>
</tr>
</table>
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Im getting : Blocked loading resource from url not allowed by $sceDelegate policy. URL: //www.youtube.com/embed/61aM0DXpKkc on the following
<!DOCTYPE html>
<html >
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Title }}</td>
<td>
<iframe class="youtube-player" ng-src="{{'//www.youtube.com/embed/' + x.URL}}" frameborder="0" allowfullscreen></iframe>
</td>
<td>{{ x.URL }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://angular.webiflex.co.uk/connect.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
app.js
var app = angular.module('plunker', [])
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*//www.youtube.com/embed/**'
]);
});
http://plnkr.co/edit/L2kvZW8Uh45HeiGeaFtl?p=preview but am not sure what Im doing wrong as have used resourceUrlWhitelist.
I managed to solve it http://plnkr.co/edit/L2kvZW8Uh45HeiGeaFtl
by adding
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $sce) {
$http.get("http://angular.webiflex.co.uk/connect.php")
.then(function (response) {$scope.names = response.data.records;});
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
};
});
and then
ng-src="{{trustSrc('//www.youtube.com/embed/' + x.URL)}}"