I am learning angular js from code school and this is their code. It wont display my products rather it shows the code exactly as in {{..}}. I have thoroughly checked for errors nothing seems to work. I have tried removing th alias of StoreController as store and used just StoreController, that doesn't work either. I enclosed my entire js code in a function but that didnt work too. I have attached the picture of my result too.
My Javascript Code in ang.js file
var app = angular.module('GemsStore',[]);
app.controller('StoreController',function(){
this.products=gems;
});
var gems=[
{
name:'Diamond',
price:100,
description:'Shiny',
canPurchase:true,
soldOut:false
},
{
name:'Sapphire',
price:200,
description:'Shiny',
canPurchase:true,
soldOut:false
}
];
My html Code
<!DOCTYPE html>
<html ng-app="GemsStore">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button class="btn-default" ng-show="store.product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="js/ang.js"></script>o
<script src="angular.min.js"></script>
</body>
</html>
My result
edited code
JS code
app.controller('StoreController', function() {
var gems = [{
name: 'Diamond',
price: 100,
description: 'Shiny',
canPurchase: true,
soldOut: false
},
{
name: 'Sapphire',
price: 200,
description: 'Shiny',
canPurchase: true,
soldOut: false
}
];
this.products = gems;
});
Your HTML code
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="product.soldOut">
<h1>{{product.name}}</h1>
<h2>{{product.price}}</h2>
<p>{{product.description}}</p>
<button class="btn-default" ng-show="product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="angular.min.js"></script>
<script src="js/ang.js"></script>
</body>
Related
I have a html page containing many text in tables. I'm using jspdf version 1.5 and higher and html2canvas libraries for creating a pdf when clicking on a button "generate the pdf".
The pdf is correctly generated.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template 01</title>
<link id="BootstrapCSS" rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body id="toPDF">
<div id="result">
<div id="target">
<div class="container-fluid">
<p id="generateButton" style="display: none;"><button type="button" class="btn btn-primary btn-lg" onclick="download()">Generate PDF</button></p>
<div id="content">
<table id="table01" class="table table-bordered table_border">
...
</table>
<table id="table02" class="table table-bordered table_border">
...
</table>
...
</div>
</div>
</div>
</div>
</body>
<script src="jspdf.umd.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="html2canvas.min.js"></script>
<script>
function download() {
let pdf = new jspdf.jsPDF('p', 'pt', 'a4')
let srcwidth = document.getElementById('toPDF').scrollWidth;
pdf.html(document.getElementById('toPDF'), {
html2canvas: {
scale: 595.26 / srcwidth, //595.26 is the width of A4
scrollY: 0
},
filename: 'jspdf',
x: 0,
y: 0,
callback: function () {
window.open(pdf.output('bloburl'));
}
});
}
</script>
</html>
And the jsfiddle code: http://jsfiddle.net/amadese57/17npbu4y
My problem is the tables are sometimes broken at the bottom of the page (and at the top of the next page).
I would like to create automatically a break when the tables cannot be entirely on the page.
I don't know how to do that and if I can do that in the function pdf.html() that I used.
Could you help me please with that ?
Thanks in advance for your help
you have added the width of the PDF file, try to add the height of the PDF file. And add some more information to the meta data
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I have a basic Ionic App and would like to apply one of three different style sheets based on a User Input.
The page will be pre-loaded with the basic style, then a user can select two other options, so far the original style is loaded and I can console log a change in the variable, but the page is not updated. Here is my code:
HTML INDEX:
<!DOCTYPE html>
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link ng-href="{{style}}" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-controller='SettingsCtrl'>
<ion-nav-view></ion-nav-view>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
</body>
</html>
HTML VIEW:
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Accessibility Views
</div>
<select ng-model='option' ng-change='changeView(option)'>
<option ng-selected='style'>Plain</option>
<option>Larger Text</option>
<option>Inverted Colours</option>
</select>
</label>
</div>
CONTROLLER:
.controller('SettingsCtrl', function($scope, Settings) {
$scope.style = Settings.style;
$scope.changeView = function(newView) {
Settings.changeView(newView);
};
})
SERVICE:
.factory('Settings', function() {
var defaultStyle = 'lib/ionic/css/ionic.css';
var styles = { 'Plain': defaultStyle,
'Larger Text': 'lib/ionic/css/ionic-large.app.css',
'Inverted Colours': 'lib/ionic/css/ionic-invert.app.css' }
var o = { notifications: false, frequency: 'Daily', style: defaultStyle };
o.changeView = function(newView) {
o.style = styles[newView];
};
)}
Any help would be greatly appreciated.
HTML tag has SettingsCtrl as well BODY tag. Remove one of them.
Also the style seems to be changing only on the factory. style in the scope of SettingsCtrl is not changed. So you can make the changeView return style and assign it to the style variable in the scope.
o.changeView = function(newView) {
o.style = styles[newView];
return o.style
};
And then in controller:
$scope.changeView = function(newView) {
$scope.style = Settings.changeView(newView);
};
Not sure if this is what you had in mind but I got it to work with the following code:
Controller:
$scope.settings = Settings;
HTML:
<link ng-href="{{settings.style}}" rel="stylesheet">
I have a html page with that is to call JSON data from a js file.
The html is below:
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
{{albums.title}}
</li>
</ul>
</div>
</body>
</html>
The "app.js" file that it calls is below:
**
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
alert("test");
return [{"artist": "Kid 606","title:":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
**
There are nor errors in the console when I run it, just nothing appears.
The alert box "test" appears when I load the page so the function is getting called, it just doesn't display the JSON. Thank you for any replies.
change this:
{{albums.title}}
to
{{album.title}}
It is OK now, thank you very much.
HTML is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}} " and title is {{album.title}}
</li>
</ul>
</div>
</body>
</html>
JS is
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function() {
return {
getAlbums: function(){
return [{"artist": "Kid 606","title":"Happiness"}];
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
$scope.albums = albumFactory.getAlbums();
});
I'm starting a small web project using ember and a json api.
It contains currently a single page with following content :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/stylesheets/ui-darkness/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
<div class="container">
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>{{#each controller}}
<div class="span-4">{{title}}
<p>{{description}}</p>
</div>{{/each}}
</script>
<script type="text/javascript" src="/javascripts/require.js" data-main="javascripts/main"></script>
</div>
</body>
</html>
My ember code is the following :
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Bookmark.find();
}
});
App.Bookmark = DS.Model.extend({
title: DS.attr('string'),
link: DS.attr('string'),
description: DS.attr('string'),
});
App.Store = DS.Store.extend({
revision: 13,
});
And /bookmarks return a this json result :
{
"bookmarks": [
{
"_id": "51ebd06a5810509f703e2504",
"title": "Stackoverflow",
"link": "http://stackoverflow.com/",
"description": "Q&A"
}
]
}
Most of my handlbars's template works as expected, and only a thing does not, the {{link}} part creates content such as <script id='metamorph-2-start' type='text/x-placeholder'></script>http://stackoverflow.com/<script id='metamorph-2-end' type='text/x-placeholder'></script>
You can see the application running there : http://sleepy-bastion-5858.herokuapp.com/
Does anybody have a clue ?
For binding HTML attributes (such as href, src, title, etc.), use the bind-attr helper. So your template should be:
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>
{{#each controller}}
<div class="span-4">
<a {{bind-attr href="link"}}>{{title}}</a>
<p>{{description}}</p>
</div>
{{/each}}
</script>