Trying to come to grips with Mustache... the problem here is that the conditional 'if/else' is not working as expected. I am checking in the data if a user is french... if they are then show true, else show false.
Problem
Mustache is completely ignoring the conditional and displaying both true and false for each table row.
My code
My markup
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
My jQuery
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
Question
Why is the if/else not working here?
EDIT: Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Mustache Examples</h1>
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
</div>
<script>
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
</script>
</body>
</html>
This is a problem of using template tag, which is actually HTML5 template tag. Using hashes in it makes browser think that this is document fragment. Seems like nested document fragments corrupt Mustache template.
Just change it to script tag, as in mustache manual.
<script id="template2" type="x-tmpl-mustache">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</script>
Related
My html header:
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
jquery:
function apply_pagination() {
console.log("apply_pagination called")
console.log("total pages", totalPages)
$pagination.twbsPagination({
totalPages: totalPages,
visiblePages: 6,
onPageClick: function (event, page) {
displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
endRec = (displayRecordsIndex) + recPerPage;
displayRecords = records.slice(displayRecordsIndex, endRec);
console.log("i am inside onpageclick");
generate_table();
}
});
}
html:
<div class="container">
<div class="table-responsive">
<h2>View Installment Details</h2>
<table class="table">
<tbody id="emp_body">
<tr>
<th>Customer ID</th>
</tr>
<tr>
<th>Transaction ID</th>
</tr>
<tr>
<th>First Due Amount</th>
</tr>
<tr>
<th>First Due Date</th>
</tr>
<tr>
<th>Second Due Amount</th>
</tr>
<tr>
<th>Second Due Date</th>
</tr>
</tbody>
</table>
<div id="pager">
<ul id="pagination" class="pagination-lg"></ul>
</div>
</div>
</div>
The console.log inside onPageClick is not being called. Is there a reason why ? It works in my staging environment but not in production.
EDITED:
Added html code for pagination. It works well in staging but not production.
The reason for twbs pagination to not display data is because your variable totalPages has a value of 1, as per this code function:
// hide if only one page exists
if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
if (this.options.initiateStartPageClick) {
this.$element.trigger('page', 1);
}
return this;
}
Make sure totalPages is >1 or it won't display any pager.
I am trying to learn the new components and I have a weak understanding of bindings and the symbols.
How come I cannot get my ng-repeat to work with this code.. I have tried using controllerAs syntax, scope, changing the bindings, everything!
APP.JS
var app = angular.module('myApp', []);
/* Mock-Data */
app.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MO'
}]);
app.controller('HomeCtrl', ['friends', function(friends) {
this.$onInit = function() {
console.log("HomeCtrl has been initialized");
this.friends = friends;
console.log(this.friends);
};
}]);
app.component('myGrid', {
templateUrl: 'grid.html',
controller: 'HomeCtrl',
bindings: {
data: '<' // I have tried: &,<,=,#
}
});
Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>My AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<my-grid data="friends"></my-grid>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Grid.html
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in data">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>
No matter what I try, I cannot get ng-repeat to work..
You don't have a controller scoped in index.html in order to tell angular where friends comes from. Can add an ng-controllerto solve this
In component you are using controllerAs which is set to vm alias so you need to reference that in the view also
index.html
<div class="container" ng-controller="HomeCtrl as ctrl">
<my-grid data="ctrl.friends"></my-grid>
</div>
grid.html
<tr ng-repeat="employee in vm.data">
DEMO
Your design is bit incorrect.You have not passed friends data to your directive from the parent scope.
Working Plunk inline with you e.g
angular.module("myApp",[])
.controller('ctr1', function($scope, friends){
$scope.friends=friends;
})
.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MOO'
}])
.component('myGrid', {
templateUrl: 'grid.html',
bindings: {
friends: '<'
},
controller:function() {
this.$onInit = function() {
console.log(this.friends);
}
}
})
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctr1">
<div class="container">
<my-grid friends="friends"></my-grid>
</div>
</body>
</html>
<!--************************Grid.html****************
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in $ctrl.friends">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>
enter image description here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ContactApp</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Not so long time ago i started to learn MEAN stack and stuck in this problem.
As you can see on picture controller receive data from server but don't display it. What should I do to fix it? Thanks for any help. Sorry for poor English =D
controller code:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
}]);[enter image description here][1]
server code:
var express = require("express");
var app =express();
app.use (express.static(__dirname + "/public"));
app.get ('/contactlist',function(req,res){
console.log ('waitnig for my lovely request');
person1 = {
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
}
person2 = {
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
person3 = {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}
var contactlist = [person1,person2,person3];
res.json(contactlist);
})
app.listen(3000);
console.log ('server runing on port 3000');
Make sure your rest api returns a json array.
DEMO
var app = angular.module('todoApp', []);
app.controller("AppCtrl", ["$scope",
function($scope) {
$scope.contactlist = [{
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
},
{
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
, {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="container">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Change:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
To:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; // note the .data part
});
The response object properties can be found at : https://docs.angularjs.org/api/ng/service/$http
I cant comment because my reputation is too low but what do you see if you console.log(response) in your controller?
if the data is coming through intact, it your page is likely loading before the data arrives, hence displaying as empty. If that is the case the following will work.
<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'> // add this ng-show
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$scope.isLoaded = false // add this
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; //make response.data as Daniel said above
$scope.isLoaded = true; // add this
});
}]);[enter image description here][1]
I am a very new learner of Handlebars and Javascript so my apology in advance. As a way to learn Handlebars, I am trying putting all basic components from online example into one self-contained web page. However it doesn't run well.
<html>
<head>
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js" />
<script type="text/javascript" src="scripts/handlebars-v4.0.5.js" />
</head>
<body>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
<script>
var source = $("#some-template").html();
alert(source);
var template = Handlebars.compile(source);
var data = { users: [
{username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan#test.com" },
{username: "allison", firstName: "Allison", lastName: "House", email: "allison#test.com" },
{username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan#test.com" }
]};
$("#content-placeholder").html(template(data));
</script>
</body>
</html>
Also, I am not able to print the source (alert(source) shows "undefined"). Is anything missing? Thanks for the help!
Looks like you haven't closed your script ta at the top where you include jQuery and Handlebars.
You should close the script tags :
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/handlebars-v4.0.5.js"></script>
Here is the complete working code
var source = $("#some-template").html();
alert(source);
var template = Handlebars.compile(source);
var data = {
users: [{
username: "alan",
firstName: "Alan",
lastName: "Johnson",
email: "alan#test.com"
}, {
username: "allison",
firstName: "Allison",
lastName: "House",
email: "allison#test.com"
}, {
username: "ryan",
firstName: "Ryan",
lastName: "Carson",
email: "ryan#test.com"
}]
};
$("#content-placeholder").html(template(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>
</table>
</script>
Module and Controller Code:
Search.js
/// <reference path="angular.min.js" />
var app = angular.module("module1", []).controller("controller1", function ($scope) {
var employees = [
{ name: "Arsalan", dateOfBirthe: new Date("Nov 23,1998"), gender: "Male", salary: "99939339.2345" },
{ name: "Kamran", dateOfBirthe: new Date("Dec 01,2000"), gender: "FeMale", salary: "99939339" },
{ name: "Arshad", dateOfBirthe: new Date("May 23,1999"), gender: "Male", salary: "99939339" },
{ name: "Jrsaloon", dateOfBirthe: new Date("Jan 01,2016"), gender: "Male", salary: "99939339.2345" }
];
$scope.employees = employees;
});
Here is the View Code from Search.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/search.js"></script>
<script src="Scripts/angular.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body ng-app="module1">
<div ng-controller="controller1">
Search : <input type="text" placeholder="Search Employees" ng-model="searchText.gender"/>
<br/><br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText">
<td>{{employee.name}}</td>
<td>{{employee.dateOfBirthe}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Out-Put Screen:
Search.png
Description: My Module+Controller data is do not bind with view ,
any one help me that how i will recorretct my code that it
do the work properly.............tnx
Include search.js AFTER angular.js. Also, for using searchText, see Shyju's answer.
<script src="Scripts/angular.js"></script>
<script src="Scripts/search.js"></script>