Using Aurelia, I have the following model:
export class Services {
heading = 'Services';
services = [
{ 'name': 'Test Service', 'instances': [{'uri': 'test_uri'}]},
{ 'name': 'Another Service', 'instances': [{'uri': 'other_uri'}, {uri: 'backup_uri'}]}
];
}
and the following view:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>${heading}</h2>
</div>
</div>
<div class="row" repeat.for="service of services">
<div class="panel panel-default">
<div class="panel-heading">${service.name}</div>
<table class="table">
<thead>
<tr>
<th>URI</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<div repeat.for="instance of service.instances">
<tr>
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</div>
</tbody>
</table>
</div>
</div>
</div>
</template>
The outer repeat.for seems to work correctly and ${service.name} is replaced with the .name property from the model. However, ${instance.uri} does not give any output. If I replace ${instance.uri} with ${service.instances[0].uri} I do get the output expected.
In addition, I expect the second repeat of service of services to generate two lines in the table body, but it generates only one.
I've tried replacing <div repeat.for="instance of service.instances"> with <div repeat.for="instance of $parent.instances"> with the same unsatisfactory result.
What do I need to change to ensure that the inner repeat works correctly?
Browsers do not allow divs in tables.
change this:
<tbody>
<div repeat.for="instance of service.instances">
<tr>
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</div>
</tbody>
to this:
<tbody>
<tr repeat.for="instance of service.instances">
<td>${instance.uri}</td>
<td>Running</td>
</tr>
</tbody>
Related
here's my profile.js
profileContainer.innerHTML =
`
<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>
`
and this is my profile.html
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
</section>
</div>
</div>
<!-- end row -->
</main>
This is the expected output:
profile
I tried changing the background color of the profile from gray to another color, but targeting the profileContainer through style.css only changes color of the outer border.. please help
if you want to update the whole page i.e overwrite the whole html code you need to add a button that initiates the page update event or you wont see any user interaction .
under tag add a button
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
<button onclick="myfunction()">click me</button>
</section>
</div>
</div>
<!-- end row -->
</main>
your JS code should be updated as
function myfunction() {
document.getElementById("profileContainer").innerHTML="<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>" ; }
You can target classes or IDs specified within JS the same way you would any other HTML. Depending on the specific element on the page you're trying to style, you could try targeting .jumbotron
Without seeing what CSS already exists to know what elements styling is currently being applied to (i.e., which class the gray background and border radius are actually tied to), it's hard to provide specifics.
What basically we do is that we provide an id or class to the element. Try to do that and then code the css in the stylesheet. This is the easy and foremost way to get out of this rid.
You can select the HTML element that you want to change by giving it an ID and select by using the JavaScript property which is getelementbyid, and changing its inner HTML by using the innerhtml property.
Component template should contain exactly one root element. If you are
using v-if on multiple elements, use v-else-if to chain them instead.
ERROR Failed to compile with 1 errors
error in ./src/App.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
</div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Author
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Here's my export default
export default {
name: 'app',
firebase: {
books: booksRef
},
components: {
Hello
}
}
What part should I fix to remove the error?
Component template should contain exactly one root element.
<template>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</template>
this will be the fix
<template>
<div>
<root-element-1></root-element-1>
<root-element-2></root-element-2>
</div>
</template>
In your case
</div class="panel panel-default">
needs to be
<div class="panel panel-default">
Official Documentation
On the official documentation, about Conditional Rendering,
somewhat "multiple" root element could be used when using v-if and v-else combo.
<template v-if="true">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
Here is the fixed code :
<div id="app" class="container">
<div class="page-header">
<h1>Vue.js 2 & Firebase Sample Application</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3>Book Lists</h3>
</div>
<div clas ="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th> Title </th>
<th> Author</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.
you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE
I am using angularjs in my application. I have a problem with this code, this code generate data first time. But when I come back to that page from other location it give only expression written in jsp page
Below is my app.js
var app = angular.module("myModule",[]);
app.controller(
"ReportController",
function ($scope,$http) {
$http({
method: 'POST',
url: 'mypage_body.do',
data: 'action=fetchdata',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(response) {
$scope.questions = response;
});
}
);
angular.element(document).ready(function (){
angular.bootstrap(document,['myModule']);
});
It gives expression when I reload the page from other location
like this
{{question.title}}
{{cell.f}}{{cell.f}}
{{row.h}} {{row.v}} {{row.v}}
I analyzed that page is not loading again. Means document.ready is not calling again on that page. Could anyone please help how to call again the module written in app.js without using document.ready.
Any help would be appreciated.
Thanks in advance.
<script type="text/javascript" src="/campustoolshighered/css/js/angular-1.2.26.min.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/js/adhocreport/app.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/uiframework/js/bootstrap.js"></script>
<div ng-controller="ReportController">
<div class="row" ng-repeat="question in questions">
<div class="col-md-12">
<div class="module">
<div class="heading">
<h2>{{question.title}}</h2>
<div class="module-options">
<span tabindex="3" class="icon-settings pop" title="Edit" data-toggle="tooltip" data-popoverid="#icon-setting"><span class="sr-only">Widget settings</span></span>
</div>
</div>
<div class="module-content" >
<div class="row">
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" role="columnheader" ng-repeat="header in question.dataTable.cols" >{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in question.dataTable.rows">
<td ng-repeat="cell in row.cells"><a ng-if="cell.link" href="{{cell.link}}" tabindex="3">{{cell.f}}</a><span ng-if="!cell.link">{{cell.f}}</span></td>
</tr>
</tbody>
</table>
</div>
<ul ng-show="question.aggregateTable">
<li ng-repeat="row in question.aggregateTable.rows">
<strong>{{row.h}} </strong>
<a ng-if="row.link" href="{{row.link}}" tabindex="3">{{row.v}}</a>
<span ng-if="!row.link">{{row.v}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if I do not bootstrap my code manually on document.ready page does not load angular js not even first time.
So I'm trying to get a modal to ng-repeat an array of objects and it won't show up at all.
I'm not quite sure what I'm doing wrong but hoping for help as to getting the ng-repeat to work!
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4>Transfer Funds</h4>
</div>
<br />
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th class="text-center">
eGift Cards
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="trans in gctrans.Items | filter: cardSearch">
<td class="text-center">
<strong>{{getCustomerName(trans)}}</strong>
<strong>{{getCustomerCardNumber(trans)}}</strong>
<small>{{getCustomerPhone(trans) | tel}}<br /></small>
<small> {{getCustomerEmail(trans)}}<br /></small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br />
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirmTransfer(trans)">Next</button>
</div>
</div>
the two most likely things that would be causing this are model not existing in scope and filter causing unexpected behavior. The first to try would be seeing if the gctrans.Items is available in the scope of the modal. Try adding {{gctrans}} in the modal and see if any data is there, like:
<div class="col-md-12">
raw data: {{gctrans}}
<table class="table">
second, if there is data try removing the filter:
<tr ng-repeat="trans in gctrans.Items">
and one more thing to try, if the data is good and the filter is not unexpectedly removing items, you might not be selecting anything inside of the repeat. Try just outputting the item
<tr ng-repeat="trans in gctrans.Items">
<td class="text-center">
<strong>{{trans}}</strong>
</td>
</tr>
thanks so much for the input. I figured out what I had done wrong in the controller (hadn't declared gctrans in the modal function).
Make sure all your stuff is declared in functions as well if you're using modals and ng-repeat!