I have looked on other questions on stack overflow on how to use the each helper in Handlebars in a HTML table but when I am doing it it is not properly reading the each function unless I put it inside the tag. I have seen online this is how it is done but it for some reason is not working for me. The data I am calling using is loading fine on the page because if I put the helper in the it works.
<div class="container" id="content">
<template id="stemplate">
<table>
<tr>
<th>Date</th>
<th>Open</th>
</tr>
<tr class="tData">
{{#each values}}
<td>{{date}}</td>
<td>{{open}}</td>
{{/each}}
</tr>
</table>
</template>
</div>
</div>
Example
Html
<table id="stemplate">
<thead>
<tr>
<th>Date</th>
<th>Open</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{date}}</td>
<td>{{open}}</td>
</tr>
{{/each}}
</script>
Js
$(function() {
var template = Handlebars.compile($("#table-template").html());
var data = [{
date: "01.01.2017",
open: true
}, {
date: "01.01.2018",
open: false
}];
$('#stemplate tbody').html(template(data));
});
Example Link
Related
How can I get v-for to display table data in the same form as the following html:
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Product ID</th>
<th></th>
</tr>
Currently I am using the following vue v-for code(below) but it is adding the table header(th) one below another. I would like the table header to display side by side.
<tr v-for="(column, index) in schema" :key="index">
<th scope="col">{{column}}</th>
</tr>
You just need to place v-for on the element you want to repeat, not it's parent.
For loop should be put on <th></th>
<tr>
<th v-for="(column, index) in schema" :key="index">{{column}}</th>
</tr>
Here is the official vue doc for list rendering: https://v2.vuejs.org/v2/guide/list.html
bind grid header and data separately.
<template>
<table>
<thead>
<tr>
<th v-for="(header,index) in gridHeader" :key="index">
{{header.displayName}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in gridData" :key="index" >
<td>
{{data.name}}
</td>
<td>{{data.age}}
</td>
<td>{{data.place}}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
import Vue from 'vue';
export default class HelloWorld extends Vue {
private gridHeader: object[] = [
{name: 'Name', displayName: 'Name'},
{name: 'Age', displayName: 'Age'},
{name: 'Place', displayName: 'Place'}
];
private gridData: any =[{name:'Tony',age:'31',place:'India'},
{name:'Linju',age:'26',place:'India'},
{name:'Nysa',age:'12',place:'India'}];
};
</script>
<style scoped>
</style>
I have a template like this, and I want ro make the table vertical(using partials is not an option in my environment, and I don't want to do it with inverted condition or duplicating html elements)
<table>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<tr>
</table>
The result should be:
<table>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row1</td>
<tr>
</table>
I already tried
var data = {
foo:true
}
<table>
<tr>
<td>row1</td>
{{#foo}}</tr><tr> {{/foo}}
<td>row1</td>
{{#foo}}</tr><tr> {{/foo}}
<td>row1</td>
<tr>
</table>
and
var data = {
foo:'</tr><tr>'
}
<table>
<tr>
<td>row1</td>
{{{foo}}}
<td>row1</td>
{{{foo}}}
<td>row1</td>
<tr>
</table>
A common misconception about Ractive is that because it uses the Mustache syntax, people think it acts like Mustache.
Mustache does string interpolation, where it replaces {{ }} to values that correspond in an object, and you get HTML. Ractive, on the otherhand, compiles the template into an AST. Then it uses that tree to create the DOM. It is similar to how Babel converts JSX into its object representation before feeding it to React, or how an HTML parser parses HTML, then constructing the DOM.
So for your scenario to work, you'll have to think in terms of properly-formed HTML:
Ractive.DEBUG = false;
const VerticalTableComponent = Ractive.extend({
template: `
<table border="1">
{{#tableItems}}
<tr>
<td>{{.}}</td>
</tr>
{{/}}
</table>
`
});
const app = VerticalTableComponent ({
el: '#app',
data: {
tableItems: ['foo', 'bar', 'baz', 'quz']
}
});
<script src="https://unpkg.com/ractive#0.8.12/ractive.min.js"></script>
<div id="app"></div>
I need to vertically populate data cells with array.
This is a simple html table
<table>
<th>Name</th>
<th>Value</th>
</table>
Existing table:
Name Value
X
Y
Expected output:
Name Value
X 54
Y 48
I need to fill the data cells for value. I have calculated values for it and stored in array. How to populate the values using angularjs?
You want to use ngRepeat to add a new row for each element in your list. See the docs here for examples of how to use this directive.
<tr ng-repeat="row in data">
<td>{{row.name}}</td>
<td>{{row.value}}</td>
</tr>
Use directive for this. Look
var app = angular.module("App", []);
app.controller("AppController", function($scope) {
$scope.data = [1, 2, 3, 4, 5];
}).directive('indexItemTable', function($timeout) {
return {
link: function(scope, element, attrs) {
var data = scope.data;
angular.element(element).find("td").each(function(index, item){
console.log(item)
angular.element(this).parent().append('<td>' + data[index] + '</td>');
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<table index-item-table>
<thead>
<th>Name</th>
<th>Value</th>
</thead>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td>E</td>
</tr>
</tbody>
</table>
</div>
I'm trying to create a live search feature with meteor similar to the one here.
I have a simple Mongo collection called "people" with 4 fields - name, gender, email, phone.
Here is my html:
<head>
<title>People Search</title>
</head>
<body>
<div class="container">
{{> search}}
</div>
</body>
<template name="search">
<div class="form-group">
<label for="search-query">Search:</label>
<input type="text" class="form-control search-query" id="search-query">
</div>
<h1>People</h1>
{{> people}}
</template>
<template name = "people">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{{#each searchresults.results}}
<tr>
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my js file:
People = new Mongo.Collection("people");
if (Meteor.isClient) {
Template.search.events({
'keyup input.search-query': function (evt) {
Session.set("search-query", evt.currentTarget.value);
},
})
Template.people.searchResults = function () {
var keyword = Session.get("search-query");
var query = new RegExp( keyword, 'i' );
var results = People.find( { $or: [{'name': query},
{'gender': query},
{'email': query},
{'phone': query}] } );
return {results: results};
}
}
What should happen is on the event of text change in the text box, the collection is queried, and the results displayed in the table.
The event gets triggered, but the table does not get updated.
Thanks
change
{{#each searchresults.results}}
to
{{#each searchResults.results}}
I was having some trouble with the Angular ng-repeat directive. The attached is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController as me" >
<button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
<br/>
<tr>
<th>Test Suite Name</th>
<th>Test Suite Key</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Total Tests</th>
<th>Passed</th>
<th>Failed</th>
<th>Quarantined</th>
</tr>
<tr ng-repeat="data in myData">
<th>{{data.name}}</th>
<th>{{data.plan_key}}</th>
<th>{{data.start_date}}</th>
<th>{{data.start_time}}</th>
<th>{{data.end_time}}</th>
<th>{{data.total_test}}</th>
<th>{{data.test_passed}}</th>
<th>{{data.test_failed}}</th>
<th>{{data.test_quarantined}}</th>
</tr>
<h1>Data from server: {{myData[0].name}}</h1>
</div>
<script>
var $received_data;
var test = angular.module("myapp", []);
// .config(['$httpProvider', function($httpProvider) {
// $httpProvider.defaults.useXDomain = true;
// delete $httpProvider.defaults.headers.common['X-Requested-With'];
// }
// ])
test.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var responsePromise = $http.get("http://127.0.0.1:5000/home");
responsePromise.success(function(data, status, headers, config) {
console.log("ok")
$scope.myData = data.result;
//$scope.received_data = data.reault;
});
responsePromise.error(function(data, status, headers, config) {
alert("error?");
});
}
} );
</script>
</body>
</html>
So basically it gets a list of JSON and I want it to be printed in table form.
I am trying to do it with ng-repeat with tr ng-repeat="data in myData" but it somehow didn't show up.
However, the <h1>Data from server: {{myData[0].name}}</h1> did get printed out correctly.
I am new to AngularJS so I suppose it must be something really stupid mistake that I have made.
Thank you
I think there are a couple problems here.
1 your HTML structure should be reworked. Ideally it should look like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in myData.result">
<td>{{data.name}}</td>
<td>{{data.start_date}}</td>
<td>{{data.start_time}}</td>
<td>{{data.end_time}}</td>
</tr>
</tbody>
</table>
2 This refers to #blowsies comment. You are using the same $scope.myData to handle the function & the data. Which is fine, but you're missing a level of nesting. Currently you have a $scope.myData.doClick() which loads the data from the server. And then you assign it at $scope.myData which is most likely having a problem. Instead, assign it to $scope.myData.result` and change your HTML accordingly.
Working example