I'm using angular.js to paginate a list of data on my website (found the code at http://www.angularcode.com/angularjs-datagrid-paging-sorting-filter-using-php-and-mysql/). The user can decide, how many rows of data he wants to display on a single page. Because of that, the table is constantly resizing. Is there a possibility to embed the app into a dynamically resizing div in order to properly append a footer-div at the bottom of the website?
Here is the code of the app:
<div id="app-container" ng-app="myApp" ng-app lang="en">
<div ng-controller="customersCrtl">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
</div>
<div class="col-md-3 col-md-offset-7">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div id="url-amount" class="col-md-3 col-md-offset-9">
<h5>Filtered {{ filtered.length }} of {{ totalItems}} total URLs</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>URL <a ng-click="sort_by('url');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Status Code <a ng-click="sort_by('statuscode');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Category <a ng-click="sort_by('statuscategory');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.url}}</td>
<td>{{data.statuscode}}</td>
<td>{{data.statuscategory}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No URLs found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
and the styles:
#footer {
width: 100%;
height: 200px;
background-color: black;
}
The footer div overlaps the angular.js app instead of beeing appended below.
Related
I'm currently working on a web application that has to function as some sort of webshop later on. I'm now working on an addToCart function, that has to pick certain data from the clicked element (the name and the price of the product, and add 1 to pcs and save everything to a session), and paste these 2 values into a template I've made and place this in the shopCart. I'm now trying to print out the 2 values I've just mentioned, but I'm stuck now.
This is the current javascript code I've made for loading in all the products, and my attempt on showing some of the values of the clicked items:
$(function(){
$.getJSON("assets/products/sample_products.json", function(response) {
$.each(response.data, function (i, el) {
let card = $($('#productCard-template').html());
card.find('#cardName').html( el.name);
card.find('#cardPrice').html( '€' + el.price );
card.find('.productItem').attr('data-price', el.price)
.attr('data-article-number', el.article_number)
.attr('data-id', el.id)
.attr('data-name', el.name)
.attr('data-stock', el.stock)
.attr('data-categories', el.categories);
$('#touchViewProducts').append(card);
});
});
});
//onclick function adds data of product to the designated template
function addToCart(){
var value = document.getElementById("productCard").value;
var getDataVal = document.getElementById('productCard-template').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
This is the html code of the templates:
<div class="row touchViewSection">
<!-- shopping sector -->
<!-- touchView -->
<!-- categories menu -->
<div class="col-3 categoriesSection">
<div class="categories">
<p style="background-color: white; margin-bottom: 0px" > Categories </p>
<a class="nav-link" id="all" href="#">All</a>
<a class="nav-link" id="knalvuurwerk" href="#">Knalvuurwerk</a>
<a class="nav-link" id="rotjes" href="#">Rotjes</a>
<a class="nav-link" id="siervuurwerk" href="#">Siervuurwerk</a>
</div>
</div>
<!-- categories menu -->
<!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
<div class="col-9 productItems" >
<br>
<div class="row" id="touchViewProducts">
</div>
</div>
</div>
<!--/touchView -->
<!--Keyboard View -->
<div class="row keyboardViewSection">
<div class="col-12 keyboardViewRow">
<table id="data-table" class="table table-bordered" style="width: 100%;">
<thead id="tableHead">
<tr>
<th> # </th>
<th> Product name </th>
<th> Free Stock </th>
<th> Price </th>
<th> Action </th>
</tr>
</thead>
</table>
</div>
</div>
<!--/Keyboard View -->
<div class="footer">
<div class="container">
<p class="text-muted"> Developed by Vesta Group</p>
</div>
</div>
</div>
<!--/shopping sector-->
<div class="col-4 cartSection">
<!--cart-->
<div class="row">
<div class="col-5">Product</div>
<div class="col-1">Pcs.</div>
<div class="col-2">Price</div>
<div class="col-3">Total</div>
</div>
<hr style="background-color: white;">
<div id="output" class="row"></div>
<div class="row shopcardProducts" id="shopcartProducts">
</div>
<div class="row cartCheck">
<div class="col-5">Number of products</div>
<div class="col-1">1</div>
<div class="col-2">Subtotal</div>
<div class="col-3 total">€ 0,00</div>
<div class="col-5"></div>
<div class="col-1"></div>
<div class="col-2">Total </div>
<div class="col-3">€ 0,00</div>
</div>
<div class="row cartCheck">
<div class="col-12 checkoutBtn"> Checkout </div>
<div class="col-6 addDiscountBtn"> Add discount </div>
<div class="col-6 cancelBtn"> Cancel </div>
</div>
<!--buttons-->
<!--/cart-->
</div>
</div>
</div>
<script type="text/template" id="productCard-template">
<div class="col-3 productCard" id="productCard" onclick="addToCart()">
<a href="#" class="productItem">
<div class="card">
<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
<div class="container">
<div class="row" style="height: 6vh; max-width: 20ch;">
<p id="cardName"> </p>
</div>
<div class="row" style="height: 50%">
<b><p id="cardPrice"></p></b>
</div>
</div>
</div>
</a>
</div>
</script>
<script type="text/template" id="shopcartRow-template">
<div class="row">
<div class="col-5" id="valueName"> </div>
<div class="col-1" id="valueQty"> </div>
<div class="col-2" id="valuePrice"> </div>
<div class="col-3" id="valueTotal"> </div>
</div>
</script>
Here's an image of what the web app looks like, I hope that could make it more clear.
Because addToCart() is a callback, you can use this to access its context (the caller element):
function addToCart(){
var value = $(this).val(); // what val you want to refer? there are no input in the template
var getDataVal = $(this).find('.productItem').getAttribute('data-name', 'data-price');
var total = 0;
console.log(this.data-name)
}
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 trying to filter an ng-repeat view of multiple item titles wrapped in hyperlinks but am getting results based on the Title and the URL string value.
How can I limit my filter to only the text of the Title and omit positives in the URL? E.g. If I search for "email" I would get results for items that have "email" in their title or text body but I would also get results that have "email" in their URL string.
Search Google for email<p>Blah blah blah</p>
Any help is greatly appreciated!
<div ng-app="Home">
<div ng-controller="Details">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-4">
<div class="searchBox">
<input type="search" ng-model="search"/>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" ng-repeat="SectionItem in Sections" ng-init="filterResult=[]" ng-hide="filterResult[$parent.$index].length <= 0">
<div class="panel panel-default">
<div class="panel-body">
<div>
<h1>{{SectionItem.Title}}</h1>
</div>
<div>
<!-- BEGIN: items belonging to this section -->
<table class="table table-condensed table-hover">
<tr ng-repeat="item in (filterResult[$parent.$index] = (SectionItems | filter:search | filterByMatchingSection:SectionItem.Title)) ">
<td>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" ng-show="item.Title != null">
{{item.Title}}
<p>
{{item.TextBody}}
</p>
</div>
</div>
</div>
</td>
</tr>
</table>
<!-- END: items belonging to this section -->
</div>
</div>
</div>
</div>
</div>
</div>
This should do the trick
<input type="search" ng-model="search.Title"/>
According to the docs you can use a pattern object expression. For your case this should work:
... | filter: { title: search } | ...
This will search only in the title property.
i have written one html file and corresponding controller logic for this page i am getting data in console but that data is not showing in my UI
<div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController">
<div class="panel-heading">Enter Notice here</div>
<div class="panel-body">
<tabset>
<!-- SECOND TAB -->
<tab heading="Notice List">
<div class="panel panel-default" ng-controller="NoticeController " >
<div class="panel-body">
Displaying all notices. {{ gradeFilter }} {{ sectionFilter }}
<div class="row">
<div class="col-md-12">
<div class="box-placeholder">
<!-- START DATATABLE 1 -->
<div class="panel panel-default {{ dataLoad }}">
<div class="panel-heading">
<a ng-mousedown="csv.generate()" ng-href="{{ csv.link() }}" download="test.csv" class="pull-right btn btn-sm btn-info">Export to CSV</a>
<div ng-if="gradeFilter" class="panel-title">Classes</div>
</div>
<div class="table-responsive ">
<table ng-table="table.tableParams" export-csv="csv" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="g in $data ">
<td data-title ="'Topic'" align="center" >{{g.noticeId}}</td>
<td data-title ="'Message'" align="center" >{{g.message}}</td>
<td data-title ="'Sender'" align="center" >{{ g.senderName }} </td>
<td data-title ="'Date'" align="center" >{{ g.date | cmdate:'dd-MMM-yyyy' }}</td>
<td align="center"><a ui-sref="admin.viewEditnotice({nid : g.noticeId})">View </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my controller file
enter code here/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
console.log('Notice loaded');
App.controller('NoticeController', ["$scope","$http","$stateParams","Notice","toaster","APISource",function($scope,$http,$stateParams,Notice,toaster,APISource) {
'use strict';
$http.get(APISource.currentApiPoint+"/app/notice")
.success(function(data){
console.log(JSON.stringify(data))
})
.error(function(data)
{
});
Define your data as, $scope.mydata = data and then in ng-repeat use, g in mydata
Set your AJAX response to controller model like this:
$scope.$data = data
I am familiar with Javascript and Jquery, but fairly new to angular. I have used jquery in the past with angular, but this application that I inherited is causing my severe grief.
I click on button and get:
Uncaught ReferenceError: addComment is not defined
Code:
<div ng-controller="TipsCtrl" class="container" id="tips">
<div class="grid" style="margin-bottom: 0" >
<div class="col-1-4">
</div>
<div style="text-align: center" class="col-1-2">
<label class="text-blue text-center">Sort By:</label>
<select style="width:30%" ng-init="order='created'" class="input" ng-model="order">
<option value="created">Date Created</option>
<option value="createdBy">Created By</option>
<option value="getCategory()">Category</option>
</select>
<button data-tooltip="Reverse the sorting order."
class="btn-blue" ng-click="reverse=!reverse">Reverse</button>
</div>
<div class="col-1-4 text-right">
<button ng-click="createEmptyTip()" style="vertical-align: bottom" class="btn-blue">Add</button>
</div>
</div>
<div class="col-1-1" ng-if="!!error">
<div class="panel">
<span class="text-red">Error:</span> {{ error }}
</div>
</div>
<div update="resultsUpdated" paginate="page in tips" order="order" reverse="reverse" url="true">
<div style="margin-bottom: 20px">
<div paginate-controller></div>
</div>
<div ng-repeat="tip in page" class="tip"
id="tip-{{ tip.id }}" async-anchor async-anchor-delay="500">
<div class="grid">
<div class="col-1-2">
<h3>
<span class="text-red" ng-if="tip.isNew()"><b>New:</b></span>
{{ tip.title }}
<div>Category: {{ tip.getCategory() }}</div>
</h3>
</div>
<div class="col-1-2 text-right">
<span>Posted by</span>
<span class="text-blue">{{ tip.createdBy }}</span>
<span>on {{ tip.created | date:'shortDate' }}</span>
<span>{{ tip.created | date:'H:mm' }}</span>
</div>
<div class="col-1-1">
<pre>{{ tip.body }}</pre>
</div>
<div class="col-3-4">
<ul ng-if="tip.attachments.length > 0" class="attachment-list">
<li ng-repeat="attachment in tip.attachments">
{{ attachment.name }}
</li>
</ul>
<div class="col-1-1">
</div>
<div class="col-1-1">
Angular Add Comment
<button onclick="addComment();" id="addcomment/{{tip.id}}" class="btn-yellow">Add Comment</button>
</div>
</div>
<!---->
<div class="col-1-4 text-right" ng-if="tip.createdBy == user.ntid">
<a href="#/tips/edit/{{ tip.id }}?paginatePage={{ params.paginatePage }}" class="btn-yellow" >Edit</a>
<!--Delete0-->
<button ng-ask="deleteTip(tip)" title="Delete"></button>
</div>
</div>
</div>
<div style="margin-top: 20px">
<div paginate-controller></div>
</div>
</div>
</div>
I call in the code the addComment() function ( I tried jquery first )
<script>
function addComment() {
console.log('in');
}
</script>
Try moving the function out of the markup and into the controller...
...inside TipsCtrl...
$scope.addComment = function() {
console.log('in');
};