I have a page which contains detail sections that are common across multiple pages of my app. I am trying to reduce code redundancy and create these mini views that will be loaded with the page.
In the main detail page I have a section that I am trying to load using ng-include
<div ng-show="checkProducts()">
<hr style="margin-bottom:5px!important"/>
<p><strong><em>Products</em></strong></p>
<div class="bs-associationPanel">
<ng-include src="commontemplates/productView/shoes"></ng-include>
</div>
</div>
I can't use routing here as this is acting like a partial view within the main detail page which is already using routes to load it and bind it to the controller.
The src value is a path in the APP to an html page called productView.html
I wrapped it in a script ng-template tag with an id
<script type="text/ng-template" id="shoes">
<table class="table table-condensed table-responsive">
<thead>
<tr>
<th>brand</th>
<th>color</th>
<th>size</th>
</tr>
</thead>
<tbody ng-repeat="s in detail.shoes">
<tr>
<td>{{s.brand}}</td>
<td>{{s.color}}</td>
<td>{{s.size}}</td>
</tr>
</tbody>
</table>
</script>
I was hoping this would work but when I render the page I get no temple and looking at the element explorer I see the following
<!-- ngInclude: undefined -->
I think I am close I just don't know what I am missing. Any suggestions on how this could be accomplished or Can this be accomplished?
Basically the script's with type text/ng-template are read by angular & angular consider it as template then put those templates inside $templateCache service for faster retrieval.
src attribute should have template name enclosed with ' single quotes, so that it can look up through $templateCache for getting the template.
<ng-include src="'commontemplates/productView/shoes'"></ng-include>
Related
I have a basic Rails app with a nested association and I am doing a standard 'line items' type view where I am dynamically adding and removing rows from a template tag. I have a select that triggers a AJAX call to replace all the nested row selects (the context changed). The expenditure controller handles the overall form and the nested-form controller is used on other pages to handle the adding and removal of rows:
<div data-controller="expenditure nested-form">
<select data-target="expenditure.budget" data-action="change->expenditure#update_related"></select>
<table>
<thead></thead>
<tbody>
inserted rows...
<tr>
<td>
<select data-target="expenditure.budgetItemSelect"></select>
</td>
</tr>
<template data-target="nested-form.template">
<tr data-new_record="true">
<td>
<select data-target="expenditure.budgetItemSelect"></select>
</td>
</tr>
</template>
</tbody>
</table>
</div>
It works fine. I can add and remove rows and if I change the expenditure.budget select all the expenditure.budgetItemSelect targets get updated EXCEPT for the one inside the template. It's as if it's missing from the entire scope of the controller. I had them nested before but now have them in the same div data-controller="expenditure nested-form" to double check and it still doesn't work. Checked spelling and even tried removing the data-target="nested-form.template". No errors in the browser console. Am I missing something obvious here?
UPDATE
Hmmm... it seems that the template tag is read only and NOT part of the DOM which is why this fails.
I managed a hack where I replaced the contents of the entire template but that seems to break the controller that adds / deletes the rows 🤦♂️.
UPDATE 2
I found a workaround - If someone can improve this code I will accept this as a better answer.
It seems to be an issue with the <template> tag in HTML5.
I have a workaround but it's ugly.
<div data-controller="expenditure nested-form">
<select data-target="expenditure.budget" data-action="change->expenditure#update_related"></select>
<table>
<thead></thead>
<tbody>
inserted rows...
<tr>
<td>
<select data-target="expenditure.budgetItemSelect"></select>
</td>
</tr>
<template id="expenditure_items_template">
<tr data-new_record="true">
<td>
<select data-target="expenditure.budgetItemSelect"></select>
</td>
</tr>
</template>
<script type="text/template" data-target="nested-form.template" id="expenditure_items_template_script">
</script>
</tbody>
</table>
</div>
Here is what I did in my controller:
// find the template
var template = document.getElementById("expenditure_items_template");
// load the template contents
var new_template = document.importNode(template.content, true);
// replace the select with my new content (off screen)
new_template.getElementById('expenditure_expenditure_items_attributes_NEW_RECORD_budget_item_id').innerHTML = select.innerHTML;
// clear the new script place holder
document.getElementById("expenditure_items_template_script").innerHTML = "";
// set the new updated template into the script tag
document.getElementById("expenditure_items_template_script").appendChild(new_template);
I basically have two templates - one <template> which holds the raw HTML and the second <script> that works with Stimulus.
Hi I am struggling to figure out how to retrieve the value from querying from an oracle database onto my web page?
I am quite new to coding and have managed to create the skeleton for where I want the code to be along with the controller and router (router not included below) to create a microservice for this action to be called. I appreciate any help. Thanks
Here are some snippits from my httpd (where I have 'Number' I want it to query the SELECT COUNT(Customer_ID) from Book:
<div class="col-md-4">
<h2>General Info 1</h2>
<table class="table table-bordered table-hover table-sm">
<thead>
<tr>
<th>Information</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td># Customers</td>
<td>Number</td>
</tr>
</tbody>
</table>
</div>
I also have the following controller too:
async function database_stats(query) {
query = `SELECT COUNT(CUSTOMER_ID) from BOOK`;
return query;
}
module.exports.database_stats = database_stats;
i think your question is very vague however... willing to send you in the right direction. The Answer depends on if you are using a 'stand alone front end' or a 'server side rendered page'. In the case of a 'stand alone front end' please do some research on AJAX. You can make a 'AJAX' request to your server to get the data, then use javascript to inject the data into the DOM. otherwise i would suggest looking into a template language such as ejs to inject variables into your html & serve.
I have stored a value in a scope on controller.js.How to get that scope value in html file.
Controller.js
myAppCont.controller('Listvalue',['$scope','$rootScope','$http',
function($scope,$rootScope,$http){
city=$scope.val;
}]);
HTML
<div class="col-md-10" ng-controller="Listvalue">
<table class="table table-bordered table-style" id="statusTable">
<thead>
<tr>
<th>values</th>
</tr>
</thead>
<tbody class="align-center">
<tr>
<td>{{city}}</td>
</tr>
</tbody>
</table>
</div>
You need to have the $scope variable inside the controller, Do it other way
myAppCont.controller('Listvalue',['$scope','$rootScope','$http',
function($scope,$rootScope,$http){
$scope.city=val;
}]);
Then it will be evaluated and shown in the view
<td>{{city}}</td>
Working Sample
Angular have 2 way data binding principle. The data you bind with the model is get reflected in the view.
The models in a respective controllers are accessed with $scope.
Whatever data you want to bind to the view should be through the $scope.
In this case, if you have, already stored data in $scope.val,
Bind that to your view,
<td>{{val}}</td>
This should work!
Hi i am quite new to angular programming and I had a question on hwo to include angular script templates into a table
Basically I have a base directive table that displays data, but I want anyone who uses that base directive to provide a template of how they want the detail row to look like. I thought the best way to do this was from an "angular script template"
This fiddle describes what I want to do:
http://jsfiddle.net/g0b1xk9s/1/
Basically in the fiddle I was wondering if it was possible to display the template with id (template1) where I have the code
<div ng-include src="template1">
</div>
Is this possible or should I find another way to do this?
Thank you for the help
Sure you can and script tags are documented as a valid template approach
<div ng-include src="'template'"></div>
<script type="text/ng-template" id="template">
<table border="1">
<tr ng-repeat="note in ctrl.notes">
<td>{{note.label}}</td>
</tr>
<tr ng-repeat-end>
<td>Done: {{note.done}}</td>
</tr>
</table>
</script>
DEMO
I would like to repeat adding table rows using a template tag with vue.js, but it doesn't work in IE11. Here is the code.
<table border="1">
<tr>
<td rowspan="2">ID</td>
<td colspan="2">Name</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<template v-repeat="items">
<tr>
<td rowspan="2">{{id}}</td>
<td colspan="2">{{name}}</td>
</tr>
<tr>
<td>{{height}}</td>
<td>{{weight}}</td>
</tr>
</template>
</table>
Any help?
See http://vuejs.org/guide/components.html#Using_Components and the warning at the end of that section:
The table element has restrictions on what elements can appear inside
it, so custom elements will be hoisted out and not render properly. In
those cases you can use the component directive syntax:
<tr v-component="my-component"></tr>.
I found a solution that changed the <template> tag to a <tbody> tag. However there would be multiple <tbody> tags in a table, I hope this is the best solution in this case.
Make a long story short, This is HTML restrictions in IE, if you want compatibility, you will have to change your HTML structure.
I found an issue with similar question like yours here: https://github.com/vuejs/vue/issues/2404
Vue renders the template into real html before compiling it, so the same html restrictions apply for Vue templates, no matter how you define it.
IE does not support inside elements like , ..