I keep on getting an unwanted span tag with and "s" in it when viewing in Chrome. I've searched online but I am still stumped. Help please?
Stop AngularJS inserting <span class="ng-scope"></span> using ng-include
Looked at that post. Similar problem but I think my issue is caused by something else. I am not using ng-include.
Let me know if I can provide more details!
Here is the code https://github.com/benhbaik/crm
Here is public/views/users/all.html and a screenshot of the issue below it.
<div class="page-header">
<h1>
Users
<a href="/users/create" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
New User
</a>
</h1>
</div>
<div class="jumbotron text-center" ng-show="user.processing">
<span class="glyphicon glyphicon-repeat spinner"></span>
<p>Loading Users...</p>
</div>
<!-- GETTING RANDOM SPAN TAG HERE w/ "s" -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>_id</th>
<th>Name</th>s
<th>Username</th>
<th class="col-sm-2"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in user.users">
<td>{{ person._id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.username }}</td>
<td class="col-sm-2">
Edit
Delete
</td>
</tr>
</tbody>
</table>
Here is a picture in dev tools.
There's a typo in your code:
<th>Name</th>s
Related
I need to print a document that is generated dynamically, with a list of tables that contains some lists of elements. Some of these lists can have literally pages, other lists can have just one element.
I tried to use the CSS page counter, but this counter doesn't increment when the page breaks. I tried to count elements that repeat each page, even after the break, like H2, but it still doesn't work. I tried to identify some element inside my code and try to count this, but it still doesn't work for me.
<div class="page" style="page-break-after:always">
<div class="row" style="text-align:center">
<h2>Some title</h2>
<h4>Subtitle</h4>
</div>
<div class="row">
<p>
This book contains {{numberPages}} numbered pages.
</p>
</div>
<div class="row">
{{dataPrint.city}}, {{dataPrint.today}}
</div>
</div>
<div class="page">
<div class="row">
<table style="border:0!important;" ng-repeat="item in dataPrint.register">
<thead>
<tr>
<td colspan="8" style="border:0!important">
<h2 style="text-align:center">Title of document</h2>
<h3>{{ item.name }}</h3>
</td>
</tr>
<tr>
<th rowspan="2">Date</th>
<th rowspan="2">Log</th>
<th colspan="3">Move</th>
<th rowspan="2">Stock</th>
<th rowspan="2">Sign</th>
<th rowspan="2">Obs</th>
</tr>
<tr>
<th>Entry</th>
<th>Exit</th>
<th>Loss</th>
</tr>
</thead>
<tbody style="border:0!important">
<tr ng-repeat="register in item.move">
<td>{{ register.date_modify }}</td>
<td>{{ register.log}}</td>
<td>{{ register.entry }}</td>
<td>{{ register.exit}}</td>
<td>{{ register.loss}}</td>
<td>{{ register.stock}}</td>
<td></td>
<td>{{ register.Obs}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8" style="border:0!important">
<div class="footer-space" style="border:0!important" id="page-number">
</div>
</td>
</tr>
</tfoot>
</table>
<div class="footer" id="pageFooter" style="text-align:center;">
</div>
</div>
</div>
<div class="page" style="page-break-before:always">
<div class="row" style="text-align:center">
<h2>Some title</h2>
<h4>Subtitle</h4>
</div>
<div class="row">
<p>
This book contains {{numberPages}} numbered pages.
</p>
</div>
<div class="row">
{{dataPrint.city}}, {{dataPrint.today}}
</div>
</div>
I don't know if it is possible, but anybody have some tip for me?
I am using javascript and angularJS and I can't change the technology.
The page behaves like the list of elements were one page, even when it breaks to print. I tried to count this breaks but I don't know if it is possible.
Thanks a million!
I have what seems to be a pretty straightforward list rendering situation but can't seem to get it to work. I have a component that when the mounted event fires sends an async call to an API to get data. Upon fetching the data, it sets the packages array with the value of the data. However, the list never actually renders in Vue. I've done this a number of times before without issue. Not sure what the problem is now.
Vue.component("tech-editing-queue", {
props: [],
data: function () {
return {
packages: []
};
},
template: `
<div>
<div class="table-responsive">
<table id="package-table" class="table table-striped">
<thead>
<tr>
<th>Package</th>
<th>Submitter</th>
<th>Status</th>
<th>Pages</th>
<th>Review Type</th>
<th>Description</th>
<th>Document Name(s)</th>
<th>Submission Date</th>
<th>Requested Due Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="package in packages">
<td>
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-duplicate"></span>
<span style="margin: 0px 6px;">{{ package.PackageName }}</span>
<span class="label label-primary" style="border-radius: 50%;">1</span>
</button>
</td>
<td>{{ package.Submitter.LastName }}, {{ package.Submitter.FirstName }}</td>
<td>
<h4 style="margin: 0px;">
<span class="label label-info">
{{ package.StateString }}
</span>
</h4>
</td>
<td>{{ package.Pages }}</td>
<td>{{ package.ReviewType }}</td>
<td>{{ package.DocumentType.Description }}</td>
<td><span>{{ package.DocumentNames }}</span></td>
<td><span>{{ package.SubmissionDate }}</span></td>
<td><span>{{ package.RequestedDueDate }}</span></td>
<td><button id="package-menu-7112" type="button" class="btn btn-link"><i class=" fa fa-ellipsis-h fa-1x undefined" aria-hidden="true"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
`,
mounted: function () {
fetch("/api/tech-editing-packages")
.then(res => res.json())
.then(response => this.packages = response)
.catch(error => console.log("Packages Error: ", error));
},
watch: {},
methods: {}
});
This packages list looks like this:
list view
The page looks like this after rendering.
page view
I expect the page to render the packages in table form but it doesn't.
I figured this out eventually. I inherited this project from someone else and they had several other javascript libraries being loaded other than Vue. After removing all the libraries other than the ones I needed specifically for my own code, it worked fine. Apparently another library was interfering. I'm not sure which at this point. Thanks for the help.
Try check if has items before redder the items:
<tr v-if="packages.length > 0" v-for="package in packages">
or
<tr v-if="packages[0].Submitter !== undefiend" v-for="package in packages">
i need help again, i have my list of products.. and i want to show in a modal bootstrap te details of products... im using symfony 2.8, Yaml, bootstrap and mysql... this is my code
<tbody>
{% for entity in tipoProductos %}
<tr>
<td>{{ entity.id }}</td>
<td>{{ entity.nombre }}</td>
<td class="hidden-480">{{ entity.abreviacion }}</td>
<td class="hidden-480">{{ entity.descripcion }}</td>
<td><span class="label label-sm label-success arrowed arrowed-righ">{{ entity.estado==1?'Habilitado':'Deshabilitado' }}</span></td>
<td>
<div class="hidden-sm hidden-xs action-buttons">
<a class="green" href="#modal-table" role="button" data-toggle="modal"> SHOW </a>
</div>
<div id="modal-table" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
Tipos de Obra
</div>
</div>
<div class="modal-body no-padding">
<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
<thead>
<tr>
<th>Nombre</th>
<th>Abreviacion</th>
<th>Descripcion</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ entity.nombre}}</td>
<td>{{ entity.abreviacion }}</td>
<td>{{ entity.descripcion}}</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</td>
</tr>
{% endfor %}
I have seen some posts that use only php, but they use a little complex functions, somebody that can help me please. I know it can be done with javascript, which is the best and fastest way to do it .. someone to help me please ...
You must put an attribute, and the id of the modal to the link - https://www.w3schools.com/bootstrap/bootstrap_modal.asp
I have a bootstrap table in which I dynamically display the results of a database search, using Angular's directive ng-repeat. Those results include an email field. I'm trying to display a button to the right of each email cell that would copy the email of that cell into the clipboard.
But that table has no unique Id field, and I don't know how to assign a different id to each row's email field, so that clipboard.js' "data-clipboard-target" knows it has to copy the email of the same row. Right now, every button copies the first row's email, independently of its own row, probably because it looks up the first appearance of the "#emailField" tag.
Any ideas ?
Here's my html file:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<input type="text" class="form-control" ng-model="query" placeholder="Chercher ici">
<br>
<br>
<h4>Results:</h4>
<table class="table table-striped table-responsive table-condensed table-bordered">
<thead>
<tr>
<th>Client</th>
<th>Contact</th>
<th>Email</th>
<th>Telephone</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td>{{ x.client }}</td>
<td>{{ x.contact }}</td>
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
<td>{{ x.telephone }}</td>
<td>{{ x.mobile }}</td>
</tr>
</tbody>
</table>
<h4>Query status:</h4>
<pre class="ng-binding" ng-bind="queryStatus"></pre>
</div>
<!-- Scripts-->
<script src="./bower_components/clipboard/dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
</script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./controller.js"></script>
</body>
Try changing this section of markup:
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
to this:
<td>
<b id="emailField_{{$index}}">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField_{{$index}}">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
You can use the $index that is available inside ng-repeat to create a unique id for each email element.
I'm creating a dynamic table using angular.js and it gets populated with results from a study. I need to be able to show more data about each of these studies if a user clicks on that specific row in the table. Here's what the table looks like.. I'm thinking I have to use ngOptions or ngSelect, but I'm not sure. Any help is greatly appreciated.
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="center" id="table-header">Date</td>
<td class="center" id="table-header">Study</td>
<td class="center" id="table-header">Sample</td>
<td class="center" id="table-header">File</td>
<td class="center" id="table-header">Big Data</td>
<td class="center" id="table-header">Action</td>
</tr>
</thead>
<tbody ng-repeat="study in studies | filter: filter_name">
<tr>
<td class="center">{{ study.created_at }}</td>
<td class="center">{{ study.study }}</td>
<td class="center">{{ study.sample }}</td>
<td class="center">{{ study.fastq }}</td>
<td class="center">{{ study.bigData }}</td>
<td class="center">
<div class="dropdown center">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li id="list-item">Continue</li>
<li id="list-item" data-toggle="modal" data-target="#more-metadata-modal">More Data</li>
<li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal">Edit</li>
<li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal">Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
use ng-Click and pass the object or the id from which you can fetch more values for the selected item.
ng-click=showMore(study);
and using this styudy you can populate a scope object that can be used in a modal panel for that particular study object