Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="../stylesheets/general.css" type="text/css" />
<style type="text/css">
.dragndrop {
position:relative;
margin:30px auto;
border:4px dashed #000;
border-radius: 25px;
padding:50px;
text-align: center;
}
table{
width:100%;
}
tr{
width:100%;
}
td, th {
padding:10px;
border:1px solid #000;
width:50%;
text-align: center;
}
</style>
</head>
<body>
<section class="container">
<!--<form action="/file-upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>-->
<form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form>
<section id="skills">
</section>
<script type="text/template" id="skillsTemplate">
<section>
<table>
<tr>
<th>Skill</th>
<th>Value</th>
</tr>
<% _.each(items, function(item){ %>
<tr>
<td><%= item.get('name') %></td>
<td><%= item.get('value') %></td>
</tr>
<% }); %>
<tr>
<td><button id="newSkill">New</button></td>
</tr>
</table>
</section>
</script>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
<script type="text/javascript">
SkillsView = Backbone.View.extend({
render : function(){
var template = _.template($('#skillsTemplate').html(), [{ name:"Linux", value:"Test"}]);
this.$el.html(template);
}
});
var skillsview = new SkillsView({el : $('#skills') });
skillsview.render();
</script>
<!-- My Javscript -->
</body>
</html>
The only important part is the underscore template is not working. It is saying that the '_' on the line: _.each(items, function(item) is undefined. Why is this happening? I tried moving the underscore script include to the top of the page and that didn't help.
I was unable to reproduce the "_ is not defined" issue, but I did find another issue that you may be running into: You're referencing the items as the variable items, but you never told _.template you want the data to be in items. Use an object literal as the data:
_.template($('#skillsTemplate').html(), {
items: [{ name:"Linux", value:"Test" }]
})
(Also, you're using item.get('name') when the data is a plain object rather than an Underscore model, but I assume that was just a remnant from your original code after you simplified your code for the question.)
Related
I use kendo editor to show html file using below code but problem is that it show line when I use tabel in html. Please find below output image:
I just want to remove line from table.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/editor/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<textarea kendo-editor k-ng-model="html"></textarea>
<div class="box wide">
<textarea ng-bind-html="html" style="width: 100%; height: 5em"></textarea>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
.controller("MyCtrl", function($scope){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>\n" +
"<table ><tr><td><strong>Test1 </strong></td></tr>" +
"<table ><tr><td><strong>Test2</strong></td></tr>" ;
})
</script>
</body>
</html>
You shouldn't use the table tag for each line.
Try this:
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>\n" +
"<table><tr><td><strong>Test1 </strong></td></tr>" +
"<tr><td><strong>Test2</strong></td></tr></table>" ;
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 am trying to implement searching concept using filter Filter, I'm getting this error and I'm unable to sort this error even I've gone through so many articles and solutions, none suites best for this ... please help !!!!
here is the code.....>
<!doctype html>
<html>
<head>
<style>
#span1{
border:2px dashed blue;
background-color:lime;
padding:0px;
margin-left:5px;
}
hr{
padding:0px;
margin:0px;
background-color:red;
height:5px;
}
h1{
border:2px solid lime;
background-color:orange;;
color:yellow;
padding:0px;
margin:0px;
position:relative;
width:100%;
float:left;
}
h1:first-line
{
color:green
}
</style>
</head>
<body ng-app="myApp" >
<h1><span id="span1">5-11-2016</span> ... Angular JS Filters implemented in Searching.</h1><br><br>
<hr>
<div ng-controller="myAppController">
Student Name : <input ng-model="searchobj.sname"/>
<br>
Select course : <select ng-model="searchobj.course">
<option>angular js</option>
<option>html</option>
<option>css</option>
<option>java script</option>
<option>jQuery</option>
<option>Bootstrap</option>
</select>
<br>
<br>
<br>
<table border="2">
<tr>
<th>Student Name</th>
<th>Course</th>
</tr>
<tr ng-repeat="item in students | filter : searchobj">
<td>{{item.sname}}</td>
<td>{{item.course}}</td>
</tr>
</table>
</div>
<script scr="angular.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myAppController",
function($scope){
$scope.searchobj={sname:" ",course:" "};
$scope.students=[
{sname:"scott",course:"html"},
{sname:"rock",course:"css"},
{sname:"umar",course:"jQuery"},
{sname:"asad",course:"angular js"},
{sname:"nayeem",course:"html"},
{sname:"onida",course:"html"},
{sname:"shakes",course:"java script"},
{sname:"rony",course:"html"},
{sname:"rock",course:"Html"},
{sname:"asif",course:"css"},
{sname:"onida",course:"java script"},
{sname:"sammy",course:"Html"},
{sname:"huber",course:"angular js"},
{sname:"watson",course:"Html"},
{sname:"azzy",course:"Html"},
{sname:"katy",course:"bootstrap"},
{sname:"randy",course:"css"},
{sname:"sammy",course:"html"},
{sname:"jaab",course:"angular js"},
{sname:"randy",course:"html"},
{sname:"peter",course:"css"}];
});
</script>
</body>
</html>
Change <script scr="angular.js"></script> to <script src="angular.js"></script>
Change========^ -----------------------------------------------------^
<html>
<head>
<script src="angular.js"></script>
My code.
<md-datepicker ng-model="csv.date" md-placeholder="Search Date"></md-datepicker>
The icon will not appear, but something is there when I inspect the dom. Thoughts?
Check the following code and take what all you need. Thank you.
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style>
.datepickerdemo md-content {
padding-bottom: 200px;
}
.datepickerdemo {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px;
}
</style>
<script>
angular
.module('firstApplication', ['ngMaterial'])
</script>
</head>
<body ng-app="firstApplication">
<h4>Choose the date</h4>
<div class="datepickerdemo" layout="column" ng-cloak>
<md-content>
<md-datepicker ng-model="csv.date" md-placeholder="Select Date"></md-datepicker>
</md-content>
</div>
</body>
</html>
I'm using NgMaps in my Angular app
I'm trying to give the center point dynamically, but it's taking some other points which is not given by me:
HTML:
<ng-map zoom="5" center="{{center}}" style="height:600px">
</ng-map>
In controller:
$scope.center =[18.9750, 72.8258];
Here's the Plnkr Code:
http://plnkr.co/edit/hbNZdSKuUZqVSsJN7he3?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.4.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ng-map zoom="8" center="{{center}}" style="height:600px">
<!-- <ng-map zoom="5" center="[20.1450107,77.8764691]" style="height:600px"> -->
<custom-control id="home" position="TOP_RIGHT" index="1000">
<div style="background-color: rgba(0,0,0,.5); color:#fff;width:200px;padding: 10px;" ng-if="customMarkers[0].clustors">
<table class="table table-condensed">
<thead>
<tr>
<th style="width: 50%">Priority</th>
<th style="width: 50%">Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in customMarkers[0].clustors">
<td>Priority {{$index}}</td>
<td class="{{clustorcolors[$index]}}"></td>
</tr>
</tbody>
</table>
</div>
</custom-control>
<div ng-repeat="(key, value) in customMarkers[0].clustors">
<div ng-repeat="point in value">
<custom-marker position="{{point.coordinate}}" on-mouseover="clustormouseover()" on-mouseout="clustormouseout()">
<div class="mappointer {{clustorcolors[$parent.$index]}}" ng-click="clickme(key,$index)">
<div class="infobox" id="clustor_{{$parent.$index}}_{{$index}}" ng-show="point.visibility">
BM_M_EXECTIVE : {{point.BM_M_EXECTIVE}},<br>
BM_PROFIT : {{point.BM_PROFIT}},<br>
BM_QUANTITY : {{point.BM_QUANTITY}},<br>
BM_NAME : {{point.BM_NAME}},<br>
BM_DISTRICT : {{point.BM_DISTRICT}},<br>
BM_TOTALPURCHASE : {{point.BM_TOTALPURCHASE}},<br>
</div>
</div>
</custom-marker>
</div>
</div>
</ng-map>
</body>
</html>
I don't know your case, but it seems working fine with me with the following example.
http://plnkr.co/edit/cec5b88WpZcoiSd1Mq28?p=preview
javascript
vm.center = "37.7699298, -122.4469157";
vm.setCenter = function() {
vm.center = "38.7699298, -123.4469157";
}
});
html
center: {{vm.center}}<br/>
<button ng-click="vm.setCenter()">Set Center to "38.7699298, -123.4469157"</button>
</div>
I had the same problem, because ngMap does not recognize the $interpolateProvider (according to #allenhwkim). Solution:
HTML:
<ng-map id="map" zoom="5" style="height:600px"></ng-map>
Javascript:
var that = this;
NgMap.getMap('map').then(function(map) {
that.map = map;
that.map.setCenter(new google.maps.LatLng(18.9750, 72.8258));
});
I hope, it helps someone. Thanks #allenhwkim for ngMap!