I need to prepare some forms for a football tournament. Simple stuff: tables and rules and some text labels. At first I launched a DTP app to create a printable PDF form, but then I realized I would rather do the thing in HTML, CSS, and Javascript.
Is there a printable-form-oriented framework that would let me typeset a form, then optionally let the users fill in some text and print the whole thing, client-side?
Please note that I’m not after the regular interactive HTML forms designed to be submitted to some backend service. I want something that emulates the old-school paper forms and, for optional bonus points, would let the users enter some text data before printing.
To give an example, a source like this:
<h1>Player List</h1>
<div class="field" data-label="Team Name" class="right"></div>
<table data-rows="5">
<thead>
<tr>
<th>number</th>
<th>name</th>
</tr>
</thead>
</table>
…could be rendered as:
PLAYER LIST _______________
Team Name
number | name
-------+----------
|
-------+----------
|
-------+----------
|
-------+----------
|
-------+----------
|
-------+----------
And the fields would be clickable and I could fill in the text before printing. (Again, client-side, no server.)
Bootstrap can help you creating a nicely looking form quickly.
You can optionally use other frameworks like Backbone, Angular, Knockout or Ember to actually save the data somewhere. But is seems like you don't need it.
Related
I'm creating a front end application which looks at a database of Hearthstone cards allowing you to sort and search them. However, the Text displayed on the cards (Within the database) has HTML formatting within it such as <b> </b>
EG:
The card "Toxic Arrow" has a text field containing:
Deal $2 damage to a minion. If it survives, give it <b>Poisonous</b>.
currently the rendering function looks as follows:
`<tr *ngFor = "let card of cards">
<td> {{card.text}} </td>
<td> <img [src] = 'card.img'
[title] = 'card.name'
[style.width.px] = ImageWidth> </td>
</tr> `
and currently the output within the table shows this:
Deal $2 damage to a minion. If it survives, give it <b>Poisonous</b>.
I'm looking for a way to format this text quickly inside this loop to remove the $ and use the already existing HTML <b> tag
I'm not using the older AngularJs, I'm using the most current up to date version of Angular.
You can replace the first <td> in your code with <td [innerHTML]="card.text"> </td>.
This will cause the text to be displayed with HTML formatting as per the tags present in the input string.
I have whole table created in a Html but I want to implement the functionality where if I click on a text I need to replicate the same table (Html) code in my application.
My HTML:
<th class="bx--table-header bx--table-sort" data-event="sort" ng-click="vm.addTowerTable()">
<a class="text-decoration-none"><i class="fa fa-plus-circle" aria-hidden="true" style="padding-right:10px;"></i>Add Tower</a>
</th>
I have a ADD TOWER as my text when I click on it I need to add a whole table... How can I implement it using angularjs?
You could use ng-repeat to loop over a dummy array whose length is the number of tables you need:
<table ng-repeat="table in vm.tables">
...
<th ng-click="vm.addTowerTable()">
...
</th>
</table>
And then in your controller:
// Right now I am just pushing null since we need something in the
// array. You could push some data about each table.
vm.tables = [null];
vm.addTowerTable = function() {
vm.tables.push(null);
};
If you don't like using a dummy array, check out some other solutions people have come up with to make it look a little nicer.
I´m currently trying to create some kind of dynamic template, which fetches data and meta information from two separate services. The final result should be an table showing the data with the correct labels. My plan was to create HTML-templates with different basic designs like a table with 3,4 or 5 columns. Then a matching controller should fetch the meta data from a service which should return an array with the id of an attribute and its name which should be displayed in the table. So far so good but now comes the tricky part:
The second service fetches the matching data for the template and the id of the meta data and the id of the actual data matches, so that you can match them correctly.
Here is the Code on plunkr: Link
The Main problem is the following piece of code:
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.postal}}</td>
</tr>
In between the <td>-tags the data doesn´t get fetched dynamic but static. I don´t want to explicitly say how my attributes are called but use the fetched data from the meta service to know how my attributes are called.
So in the end the template should get the names of the attributes as well as the matching data. Do you guys have any good idea for me how to solve this?
EDIT
To make things a little more clear:
At the moment the data between the <td> tags is fetched static because the term {{person.name}} stands there hard coded. Let´s assume that the structure of the data chenges and there will be a country-attribute instead of the postal one. The template which stays the same still tries to get data from person.postal and not from person.country. So undefined or even an error would be the consequence.
To prevent this the names of the attributes should get fetched from a meta service and build in the HTML page.
The workflow should look somehow like this:
fetch the metadata --> get the names of the attributes
Set the names of the attributes inside the 'HTML' to call the correct attribute
fetch the actual data with the attributes defined before
Create the table
http://jsfiddle.net/Lt024p9h/1/
<div ng-controller="MyCtrl">
<table border="1">
<tr ng-repeat="person in persons">
<td ng-repeat="attr in query.attribs">
{{person[attr.id]}}
</td>
</tr>
</table>
</div>
Right so what is going on here?
So going by your fiddle, what we do if get the attributes you wish to display then using the object as an associative array.
This does require that the attr.id and the properties match up.
Please check this:
http://plnkr.co/edit/61JgnU?p=preview
If you start filling the fields you will see the fields been printed. Which is fine.
Now if you press the Add Input then bunch of fields will be added.
I need to add the newly added fields value to be printed under the main fields. (Please let me know if you need more explanation.)
Here is how I need it to be for the newly added fields:
I don't know how to show the fields without needing to make another $scope.fields array.
One more thing, in the $socpe.fields array there are more than 20 different fields, I just put what it needed for this question.
Thanks.
My recommendation would be to loop through your inputs array with the same markup you used for the users. The following seems to work if I understand what you're looking for.
<div ng-repeat="input in inputs">
<table class="table table-bordered">
<tr ng-repeat="field in fields | orderBy: 'index'" ng-show="input[field.id]">
<td class="col-md-4"><b>{{field.name}}</b>
</td>
<td class="col-md-7">{{input[field.id]}}</td>
</tr>
</table>
</div>
Another option you might want to consider is a custom directive taking the fields array and the display array as parameters.
From the angular example page
I've tried this example and works
Search: <input ng-model="searchText">
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
But I want with angular define a string within HTML
I need such a construction for my website were products frequely has a price change. These prices I grab from a database. Depend on which webpage I am i want to show a price from the database
something like:
<ng-model="searchText = John">
So without having an input.
To set a value for searchText, just initialize it in your controller:
$scope.searchText = 'John';
Otherwise, you can use ng-init, but this should really be reserved for scenarios that require initialization in the view:
<div ng-init="searchText='John'">{{searchText}}</div>