I am using handlebars as my view templates with the mix of Angularjs. I am stuck in a situation where I have a loop in which I am displaying all the elements as clickable url which when clicked should pass the value to controller.
Code I have written:
<tbody>
{{#each continueDiscovery}}
<tr>
<td headers="name">{{productName}}</td>
<td headers="name">{{user}}</td>
</tr>
{{/each}}
</tbody>
Angular.js controller code:
$scope.productDiscovery = function(productName){
alert("Task Id is "+productName);
var productName = $scope.productName;
console.log($scope.productName)
console.log(productName)
};
But I keep getting the productName as undefined.
Try something like:
<tbody>
{{#each continueDiscovery}}
<tr>
<td headers="name">{{productName}}</td>
<td headers="name">{{user}}</td>
</tr>
{{/each}}
</tbody>
var productName = $scope.result;
$scope.productDiscovery = function(){
alert("Task Id is "+productName);
};
Handlebars have the same syntax of printing the data and takes the precedence over Angular when using both.
<tbody>
{{#each continueDiscovery}}
<tr>
<td headers="name">{{productName}}</td>
<td headers="name">{{user}}</td>
</tr>
{{/each}}
</tbody>
Related
I have an object that looks like this:
[{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}]
My angular/html code looks like this:
<table class="Names">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody>
<tr ng-repeat-start="value in msg.object">
<td rowspan="2">{{value.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in msg.object">
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
The names show up fine and vertically how i'd want them to be in the table (first column),
but for each value of name i get both of the ages displaying instead of just the age for that person.
Can anyone guide me in the right direction here? I feel like I'm close but just picked up angular today so I'm new to it and ng-repeat.
You only need a simple row repeat with 2 cells in each row
<tr ng-repeat="value in msg.object">
<td>{{value.name}}</td>
<td>{{value.age}}</td>
</tr>
Your table format is wrong. Place the headers inside and do a ng-repeat to generate tr
DEMO
var app =angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.users = [{'name':'Mike', 'age':21},
{'name':'Joe', 'age':24}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table border="2">
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr ng-repeat="user in users">
<td >{{user.name}}</td>
<td >{{user.age}}</td>
</tr>
</table>
</body>
I am trying to figure out how to render some data in a table using Handlebars.
I already have the part for the header.
I did it like this:
<thead>
<tr>
{{#each chart.table-header}}
<th>
{{#if th-image.length}}
<p><img src="/assets/images/{{th-image}}" alt=""></p>
{{/if}}
<strong>{{{th-title}}}</strong>
<p>{{{th-description}}}</p>
</th>
{{/each }}
</tr>
</thead>
And here my chart.json:
{
"table-header" : [
{
"th-title": "",
"th-description": "",
"th-image": "",
"special-case": ""
},
{
"th-title": "Online Investing",
"th-description": "Make more informed...",
"th-image": "MESDicon.png",
"special-case": ""
},
{
"th-title": "Merrill Edge Guided Investing",
"th-description": "Go online to...",
"th-image": "MEGIicon.png",
"special-case": ""
},
{
"th-title": "Invest with an advisor",
"th-description": "Get professional...",
"th-image": "MEACicon.png",
"special-case": ""
}
],
"table-body" : [
{
// HERE GOES THE INFO FOR THE TBODY ELEMENT.
}
]
}
But for the rest of tbody part I don't know how can I render the rest of the info.
It should look like this:
But the idea is to render that data coming from the chart.json file.
<tbody>
<tr>
<td>Investing method</td>
<td>Online</td>
<td>Online with professional portfolio management</td>
<td>With an advisor</td>
</tr>
<tr>
<td>Simple, straight-forward pricing</td>
<td><strong>$6.95 online equity & ETF trades<sup>3</sup></strong><br>(Qualify for $0 trades with Preferred Rewards)<sup>2</sup> Other fees may apply<sup>3</sup> </td>
<td><strong>0.45% annual fee</strong><br>Other fees may apply</td>
<td><strong>0.85% annual program fee</strong><br>Other fees may apply</td>
</tr>
<tr>
<td>Minimum investment</td>
<td><strong>None</strong></td>
<td><strong>$5,000</strong></td>
<td><strong>$20,000</strong></td>
</tr>
<tr>
<td>Investment choices</td>
<td><strong>Full range of investments</strong></td>
<td><strong>A set of ETF strategies</strong></td>
<td><strong>A set of mutual fund/ETF strategies</strong></td>
</tr>
<tr>
<td>Bank & invest with one login</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
</tbody>
Any suggestions?
since your table-body is array of objects. you can loop through that and using keys you can access data.
<thead>
<tr>
{{#each chart.table-header}}
<th>
{{#if th-image.length}}
<p><img src="/assets/images/{{th-image}}" alt=""></p>
{{/if}}
<strong>{{{th-title}}}</strong>
<p>{{{th-description}}}</p>
</th>
{{/each }}
</tr>
</thead>
<tbody>
{{#each chart.table-body}}
<tr>
<td>{{this.your_key}}</td>
<td>{{this.your_key}}</td>
<td>{{this.your_key}}</td>
<td>{{this.your_key}}</td>
</<tr>
{{/each}}
</tbody>
Use below code snippet to resolve the issue:
<thead>
<tr>
{{#each table-header}}
<th>
{{#if th-image.length}}
<p><img src="/assets/images/{{th-image}}" alt=""></p>
{{/if}}
<strong>{{th-title}}</strong>
<p>{{th-description}}</p>
</th>
{{/each }}
</tr>
</thead>
<tbody>
{{#each table-body}}
<tr>
<td>{{key1}}</td>
<td>{{key2}}</td>
<td>{{key3}}</td>
<td>{{key4}}</td>
</<tr>
{{/each}}
</tbody>
The problem is that you are not enclosing your handlebars in a <script> tag. Handlebars will compile the template incorrectly without throwing any errors. For div it works always it seems.
Thus simply wrap the template section in a script tag like so:
<script type="text/x-handlebars-template" id="carBladeTemplate">
{{#each cars}}
<tr class="carItem" data-car-id="{{Id}}">
<td>{{Id}}</td>
<td>{{Make}}</td>
<td>{{Model}}</td>
</tr>
{{/each}}
</script>
I would like to build a dynamic table using handlebars. I think I have to use lookup helper to achieve my wanted result. I am having some trouble using the lookup helper and the documentation is rather poor.
An example of my object looks like this:
{
headers:[
0:"name",
1:"brand",
2:"type",
3:"rating",
4:"edited"
]
tableContent:[
0:{
contentName:{
name:"Fanta",
brand:"Coca-Cola Company",
type:"Soda",
rating:"3",
edited:"2017-05-24"}
}
]
}
Handlebars template:
<script id="itemTemplate" type="text/x-handlebars-template">
<table id="table" class="bordered highlight centered">
<thead>
<tr>
{{#headers}}
<th>{{this}}</th>
{{/headers}}
</tr>
</thead>
<tbody>
<tr>
{{#each tableContent}}
{{#each headers}}
<td>{{lookup ../contentName headers}}</td>
{{/each}}
{{/each}}
</tr>
</tbody>
</table>
</script>
The reason I can't simply do <td> contentName.name </td> and so on, is that the user can create their own columns in the database, so I would have no way of knowing the property names beforehand.
With a little modification in your object, you can do it with ember-contextual-table.
Here is the twiddle for you.
Sample code:
{{#data-table data=data.tableContent as |t|}}
{{#each data.headers as |columnName|}}
{{t.column propertyName=columnName name=columnName}}
{{/each}}
{{/data-table}}
Updated
But if you want to make your code run, here it is:
<table class="bordered highlight centered">
<thead>
<tr>
{{#each data.headers as |header|}}
<th>{{header}}</th>
{{/each}}
</tr>
</thead>
<tbody>
<tr>
{{#each data.tableContent as |c|}}
{{#each data.headers as |h|}}
<td>{{get c h}}</td>
{{/each}}
{{/each}}
</tr>
</tbody>
</table>
Have a look at this twiddle
How can I pass array Json data from angularjs Controller to html.
Here is my html
<body ng-app="bookApp">
<div ng-controller="bookListCtr">
<table>
<thead>
<tr>
<th>something</th>
<th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><( item.id )></td>
</tr>
</tbody>
</table>
</div>
</body>
Here is my Angularjs
var bookApp = angular.module('bookApp', []);
bookApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<(');
$interpolateProvider.endSymbol(')>');
});
bookApp.controller('bookListCtr', function ($scope, $http) {
$http.get('http://localhost/client_side/public/book').success(function(data) {
if(data.s_respond === 200){
$scope.items = data.data;
console.log(data.data)
}
});
});
This is Json data After console
s_respond = 200
data = "[{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]"
I think that you need parse the json
$scope.items = JSON.parse(data.data);
a link that explain that:
https://www.quora.com/How-can-I-convert-JSON-format-string-into-a-real-object-in-JS
There r two tags... meaning 2 column try adding another in Ua body
<body ng-app="bookApp"> <div ng-controller="bookListCtr">
<table>
<thead>
<tr> <th>something</th> <th>something</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items"> <td>{{item.id }}</td>
<td>something else</td>
</tr>
</tbody>
</table>
</div>
</body>
I want to count the position of table children using jQuery in a Meteor JS helper function, but I always get an empty result, because the helper function returns before the table data gets inserted.
Here is my code:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Game</th>
</tr>
</thead>
<tbody>
{{#each games}}
{{> game}}
{{/each}}
</tbody>
</table>
<template name="game">
<tr>
<td>{{counter}}</td>
<td>{{name}}</td>
</tr>
</template>
Template.game.helpers({
counter: function() {
return $('table.table tbody tr td:contains("this.name")').index();
}
});
It should be like:
1 Test
2 ABC
3 HelloWorld
...
Any help would be greatly appreciated.
The idea for solution is that you add to array of games objects additional field called index.
Later in game template you simply use {{index}}.
Below code should solve your issue:
var games_with_index = Games.find().map(function(document, index){
document.index = index;
return document;
});
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Game</th>
</tr>
</thead>
<tbody>
{{#each games_with_index}}
{{> game}}
{{/each}}
</tbody>
</table>
<template name="game">
<tr>
<td>{{index}}</td>
<td>{{name}}</td>
</tr>
</template>
See also this:
Print the loop index in Meteor.js templates