We Keep Coding

How to display page number and total pages to print HTML

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!

Bootstrap Modal with foreach loop. How can pass the foreach argument?

I'm working with PHP (Laravel 5.3) and developing a Blade view with a Bootstrap modal that have a foreach loop inside to show too many rows. This modal is called from a table that, in the end of every row have a button for more details (and this details are an array).
So, how can I pass the array data to the modal?
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Name</th>
<th class="column2">Contact</th>
<th class="column3">Details</th>
</tr>
</thead>
<tbody class="main-rows list" >
#foreach ($listBusiness as $business)
<tr>
<td class="column1">{{$business->name}}</td>
<td class="column2">{{$business->contact}}</td>
<td class="column7">
<a data-toggle="modal" data-target="#modalBusinessDetails">
<i class="la la-search"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Created at</th>
<th class="column2">Active</th>
<th class="column2">Employees</th>
</tr>
</thead>
<tbody class="main-rows">
#foreach ($ListDetail as $BusinessDetail)
<tr>
<td class="column1">{{$BusinessDetail->created_at}}</td>
<td class="column2">{{$BusinessDetail->active}}</td>
<td class="column3 text-center">{{$BusinessDetail->employees}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="btn group">
<button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
</div>
</div>
</div>
</div>
</div>

Just like #Vidal said, this requires JS (the likes of AJAX, AXIOS, etc)
Here is my sample controller method that you can use for something like that.
function getData(Request $request)
{
$data = DB::table('table_name')->get(); //can be done differently
//create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
$returnHTML = view('view_name',compact('data'))->render();
return response()->json( ['success' => true, 'html' => $returnHTML] );
}
Hope it helps.

The appearance of the added category in "user services list" page

I just added a category services(the category name: Like) , but when I go to services list (in user panel), more categories appear before the Like category.
Please see this video for a better understanding of my problem:
Serviceslist.blade.php codes(in views folder) :
#extends('user.layouts.master')
#section('site_title', 'Service List')
#section('page_title')
<i class="fa fa-list-ol"></i> #lang('slide.serviceslist')
#endsection
#section('body')
<div class="row">
<div class="col-md-12">
#foreach($categories as $category)
<div class="card">
<div class="card-header bg-dark text-white">
#if(!empty($category->category)) {{ $category->category->name }} #endif
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Sevice code</th>
<th>Service name</th>
<th>Price</th>
<th>min</th>
<th>max</th>
</tr>
</thead>
<tbody>
#php
$items = \App\ServicePrice::where('category_id', $category->category_id)->where('user_id', Auth::id())->get();
#endphp
#foreach($items as $item)
#if(!empty($item->service))
<tr>
<td> {{$item->service->id}}</td>
<td> {{$item->service->name}}</td>
<td>{{ $item->price }}</td>
<td>{{ $item->service->min }}</td>
<td>{{ $item->service->max }}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</div>
#endforeach
</div>
</div>
#endsection
and services list controller:
public function serviceList(){
$categories = ServicePrice::where('user_id', Auth::id())->distinct()-
>get(['category_id']);
return view('user.serviceList', compact('categories'));
}

You need to order the categories in the controler with categories id to see the last categori as first.
public function serviceList(){
$categories = ServicePrice::where('user_id', Auth::id())->distinct()->orderBy( "category_id", "DESC" )->get(['category_id']);
return view('user.serviceList', compact('categories'));
}

Unwanted <span class="ng-scope"> s</span>

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

Get id of row selected using angular.js using ngSelect or ngOptions

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