I have the following document which I need to pass values into a template using handlebars. I have managed to display all the values except for those of reps and kilos which I can't seem to access.
How could I write my template code to reach those values? I want to print them out in pairs, so reps[0] with kilos[0] and so on.
{
"personId": "Mario",
"date": "7-10-2014",
"workout": {
"exercise": "Military Press",
"musclegroup": "Shoulders",
"sets": [
{
"reps": [
"20",
"30"
],
"kilos": [
"22",
"33"
]
}
]
}
}
This is my template so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- CSS Stylesheets -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./../../static/styles/main.css">
<!-- Adding google fonts -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300|Satisfy' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Title & logo -->
<div id="header">
<h1><i class="fa fa-book"></i> loGym</h1>
</div>
<!-- Main body of page -->
<main role=”main”>
<div id="content">
<h2><strong>Workout</strong></h2>
{{#if content}}
{{#content}}
<p><strong>Date</strong> - {{date}}</p>
<p><strong>Muscle Group</strong> - {{workout.musclegroup}}</p>
<p><strong>Exercise</strong> - {{workout.exercise}}</p>
<p><strong>Sets</strong></p>
<ul id="setList">
{{#sets}}
<li>Reps: {{reps}} - KG: {{kilos}}</li>
{{/sets}}
</ul>
{{/content}}
{{else}}
<p>There are not documents avalable.</p>
{{/if}}
</div>
<form>
<input type="button" id="homeButton" class="buttons" value="Home Page" onclick="window.location.href='/'">
</form>
</main>
</body>
</html>
You need to utilize the {{#each}} and {{this}} statements. Not 100% sure on the formatting you are going for, but here's a quick example.
{{#if content}}
{{#content}}
<p><strong>Date</strong> - {{date}}</p>
<p><strong>Muscle Group</strong> - {{workout.musclegroup}}</p>
<p><strong>Exercise</strong> - {{workout.exercise}}</p>
<p><strong>Sets</strong></p>
<ul id="setList">
{{#sets}}
<li>Reps: {{#each reps}}{{this}}{{/each}} - KG: {{#each kilos}}{{this}}{{/each}}</li>
{{/sets}}
</ul>
{{/content}}
{{else}}
<p>There are not documents avalable.</p>
{{/if}}
Related
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I am sure there are techniques to have a better SEO approach using AngularJS features, (https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/).
As an example, the source code of a project I am currently developing, returns the next:
<html lang="en" data-ng-app="ByTheWayApp" data-ng-controller="general">
<head>
<title>ByTheWay</title>
<base href="/" />
<meta charset="utf-8" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700|Courgette|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,latin-ext" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"
href="/assets/css/bytheway.css">
<link
rel="stylesheet"
type="text/css"
ng-href="{{ templateCSS }}">
</head>
<body>
<app>
<div class="loading">
<span>ByTheWay</span>
</div>
<div class="app-wrapper {{ displayClass }}" load >
<header class="header h-3 fixed">
<div class="inner-wrapper">
<div class="brand wpx-7">
<a href="/">
<h1 class="title"><span>ByTheWay</span></h1>
<h2 class="slogan"><span>chasing dreams worldwide</span></h2>
</a>
</div>
<nav class="nav w-auto text-right aw-const" id="nav">
home
sign in
<strong>sign up</strong>
</nav>
</div>
</header>
<div class="page" data-ng-controller="page" data-ng-view>
<!-- Here Go Every Page Templates using $routeProvider.when('',{}); -->
</div>
</div>
</app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script type="text/javascript" src="/assets/js/bytheway.js"></script>
</body>
</html>
.
<div class="page"></div> would contain the Template .html file content, but it is not displayed when I check the source code, does the same happen when Google Spiders/Bots crawl my site ?
ps. I am not using yet meta tags, such description, tags, etc, because I am yet defining relevant content to be displayed.
Thank you and all the best
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I'm doing a single page application using AngularJS. On my index.html I'm using an ng-view direction to show the header section. The navigation section is defined as a ul element with a bunch of li elements that represents navigation links. I have a ng-class on each li element that needs to set the class to active. Based on my code, it does, but it doesn't appear on the page until after I click on the page. Provided is my code, please help. Thank you in advance
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="templates/TemplateCtrl.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
templates/header.html
<header >
<div class="main-menu" >
<div class="container">
<div class="row">
<div class="col-md-4">
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;"> Hidayah
</a></h1>
</div>
<div class="col-md-8">
<div class="dropdown">
<ul class="nav nav-pills" ng-controller="TemplateHeadCtrl">
<li ng-repeat="NavLink in NavLinks" ng-class="IsSelected(NavLink)">
{{NavLink.LinkTitle}}
</li>
<!-- <li id='liHome' class="active"></li>
<li id='liPortfolio'>Portfolio</li>
<li id='liBlog'>Blog</li>
<li id='liContact'>Contact</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
templates/TemplateCtrl.js
app.controller("TemplateHeadCtrl", ['$scope','$http', function($scope,$http){
$scope.NavLinks = [
{
"LinkTitle": "Home",
"LinkURL": "#/",
"LinkID": "liHome"
},
{
"LinkTitle": "Portfolio",
"LinkURL": "#Portfolio",
"LinkID": "liPortfolio"
},
{
"LinkTitle": "Blog",
"LinkURL": "#Blog",
"LinkID": "liBlog"
},
{
"LinkTitle": "Contact",
"LinkURL": "#Contact",
"LinkID": "liContact"
},
{
"LinkTitle": "Contact1",
"LinkURL": "#Contact1",
"LinkID": "liContact1"
}
];
/*
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};*/
$scope.SetMaster = function(section){
$scope.SelectedSection = section;
};
$scope.IsSelected = function(section){
return $scope.SelectedSection === section? 'active': '';
};
}]);
Also for some reason the $scope.NavLinks function does not work either. I have it commented it out in my code. The NavLinks.json is located under the same folder of TemplateCtrl.js
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};
Make change in 'templates/header.html' like this:
<li ng-repeat="NavLink in NavLinks" ng-class="{active : IsSelected(NavLink)}">
{{NavLink.LinkTitle}}
</li>
And in 'templates/TemplateCtrl.js':
$scope.IsSelected = function(section){
return $scope.SelectedSection.LinkID == section.LinkID;
};
I'm trying to have a slideshow and carousel in child template in angularjs, but as they loads, they doesn't work. I found that it's because the javascript wouldn't execute, how should I resolve this?
<!doctype html>
<html class="no-js" lang="" ng-app="tte" ng-controller="GeneralCtrl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{Page.Title}}</title>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<link rel="stylesheet" href="/media/css/swiper.min.css">
<link rel="stylesheet" href="/media/css/owl.carousel.css">
<link href="/media/css/nprogress.css" rel="stylesheet">
<link rel="stylesheet" href="/media/css/style.css">
<script type="text/javascript" src="/media/js/angular.js"></script>
<script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
<script type="text/javascript" src="/media/js/re-tree.js"></script>
<script type="text/javascript" src="/media/js/angular-route.js"></script>
<script type="text/javascript" src="/media/js/angular-md5.js"></script>
<script type="text/javascript" src="/media/js/angular-cache.js"></script>
<script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="/media/js/app.js"></script
</head>
<body>
<ul id="menu-main">
<li class="logged-in"><img src="./media/img/general/profile.png" alt="text" width="75" height="75" id="profileImage" class="img-responsive img-circle center-block"></li>
</ul>
<div ng-view></div>
<script src="/media/js/vendor/swiper.min.js"></script>
<script src="/media/js/vendor/owl.carousel.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
//pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay: 2500,
autoplayDisableOnInteraction: false,
//mousewheelControl: true,
keyboardControl: true
});
$('.owl-carousel').owlCarousel({
rtl:true,
loop:false,
margin:10,
nav:true,
dots:false,
margin:30,
merge:true,
slideBy:4,
responsive:{
0:{
items:2
},
768:{
items:3
},
992:{
items:4
}
}
})
$('.owl-carousel .owl-controls .owl-nav .owl-prev').html('<span class="glyphicon glyphicon-menu-right"></span>');
$('.owl-carousel .owl-controls .owl-nav .owl-next').html('<span class="glyphicon glyphicon-menu-left"></span>');
</script>
</body>
</html>
and the child page is :
<header id="header">
<div class="swiper-container rtl">
<div class="swiper-wrapper">
<div ng-repeat="Slider in hmc.Sliders" class="swiper-slide" style="background-image:url(/media/img/test.gif)">
<div class="slide-title">
<h2>test</h2>
<h1>test<span>test ttitle</span></h1>
test </div>
</div>
<!--<div class="swiper-slide" >Slide 2</div>
<div class="swiper-slide" >Slide 3</div>
<div class="swiper-slide" >Slide 4</div> -->
</div>
<!-- Add Pagination -->
<!--<div class="swiper-pagination"></div>-->
<div class="icon-arrow-down" id="swiper-button-down"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</header>
when it's loads to the page the angular ng-repeat do it's job and repeat items it it should but it's not rendered