I am new to angular JS and working on table to have odd/even background colour change however I am facing some challenges.
Here is my code
<!DOCTYPE html>
<html>
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/getCustomer")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Output I am getting is not desirable, the odd country data is coming blank.
Use below code, I think for the column country odd condition is missing
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green"> Country</td></tr>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
<td ng-if="$even">
{{ x.Country }}</td>
</tr>
</table>
You can do it with CSS much more simple and clean code.
table tr:nth-child(odd) td{
//your style
}
table tr:nth-child(even) td{
}
You can also define the basic background color and then just use odd/even.
You can use CSS for background color change.
<style>
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
tr:nth-child(odd) { background-color: #f1f1f1; }
</style>
The reason why your data is not coming properly is that you have used ng-if="$odd" to apply styles for odd columns.
So change your HTML to the following way and add background color from CSS.
<table>
<tr> <td style="background-color:green">Name</td> <td style="background-color:green">Country</td></tr>
<tr ng-repeat="x in names">
<td>
{{ x.Name }}</td>
<td>
{{ x.Name }}</td>
<td>
{{ x.Country }}</td>
</tr>
</table>
Related
I am trying to display book data - title, author, publisher and so on, plus image as a cover page. All of the data except the image I managed to display.
Here is my code:
Routes:
Route::get('/dynamic_pdf', 'DynamicPDFController#index');
Route::get('/dynamic_pdf/pdf', 'DynamicPDFController#pdf');
Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use PDF;
class DynamicPDFController extends Controller
{
public function index(){
$book_data = $this->get_book_data();
return view('dynamic_pdf')->with('book_data',$book_data);
}
//get book data method
public function get_book_data(){
$book_data = DB::table('books')
->limit(515)
->get();
return $book_data;
}
public function pdf(){
PDF::setOptions(['isHtml5ParserEnabled'=>true, 'isRemoteEnabled'=>true]);
$pdf= \App::make('dompdf.wrapper'); //uses a method of dompdf
$pdf->loadHTML($this->convert_book_data_to_html());// converts book data to html
return $pdf->stream();//makes it able to show pdf file
}
function convert_book_data_to_html()
{
$book_data = $this->get_book_data();
$output = '
<h3 align="center">Book Data</h3>
<table width="100%" style="border-collapse: collapse; border: 0px;">
<tr>
<th style="border: 1px solid; padding:12px;" width="20%">Cover</th>
<th style="border: 1px solid; padding:12px;" width="30%">Title</th>
<th style="border: 1px solid; padding:12px;" width="15%">Author</th>
<th style="border: 1px solid; padding:12px;" width="15%">Publisher</th>
<th style="border: 1px solid; padding:12px;" width="20%">Year</th>
<th style="border: 1px solid; padding:12px;" width="20%">Description</th>
</tr>
';
foreach($book_data as $book)
{
$output .= '
<tr>
<td style="border: 1px solid; padding:12px;"> <img src="/storage/public/cover_images/'. $book->image .'"> </td>
<td style="border: 1px solid; padding:12px;">'. $book->title.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->author.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->publisher.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->year.'</td>
<td style="border: 1px solid; padding:12px;">'. $book->description.'</td>
</tr>
';
}
$output .= '</table>';
return $output;
}
}
View:
<!DOCTYPE html>
<html>
<head>
<title>Laravel - How to Generate Dynamic PDF from HTML using DomPDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
}
</style>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Welcome to our pdf data</h3><br />
<div class="row">
<div class="col-md-7" align="right">
<h4>Books Data</h4>
</div>
<div class="col-md-5" align="right">
Convert into PDF
</div>
</div>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Cover</th>
<th>Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Year</th>
<th>Description</th>
</tr>
</thead>
<tbody>
#foreach($book_data as $book)
<tr>
<td> <img src="{{asset('/storage/public/cover_images/'.$book->image )}}" style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;"></td>
<td>{{ $book->title }}</td>
<td>{{ $book->author }}</td>
<td>{{ $book->publisher }}</td>
<td>{{ $book->year }}</td>
<td>{{ $book->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
The images from the view I can display but when I click the button to convert to PDF the images are not displayed but it says image not found or type unknown.
I really do not understand why it does not work.
i created directive for making print page.this directive have template page that included button and print template(this have ngRepeat on Result object).print button was clicked fire "click" funciton in Controller of directive then ajax request send to server for get array of object that fill print tamplate.
Mainpage.html
<div ng-class="{'btn':true,'btn-warning':true,'disabled':disableBtn}" data-toggle="modal"
ng-click="getdetail=true;" data-target="#detailModal">order detail</div>
<print-order disable-btn="disableBtn" order="selectedItem"></print-order>
print.template.html
<a ng-click="ctrl.click()" ng-class="{'btn':true,'btn-info':true,'disabled':ctrl.disableBtn}" >
print
<i class="fa fa-print"></i>
</a>
<div id="printSection">
<table style="width: 100%;font:13px tahoma;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="border-bottom: 3px solid black;">
<p>number: </p>
{{ctrl.order.fldTracking}}
</th>
<th>
<img src="/images/receipt-logo.png" alt="">
</th>
<th style="border-bottom: 3px solid black;">
<p>code :</p>
<p> {{ctrl.order.customer.fldMobilePhone}}
<br> {{ctrl.order.fldAtFA.split("-")[0]}}
</p>
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 3px solid black;">
<td colspan="3" style="padding: 10px;line-height: 20px;">
cutomer : {{ctrl.order.customerAddress.fldContactName }}
<br /> address: {{ctrl.order.customerAddress.fldAddress }}
<br/>mobile : {{ctrl.order.customerAddress.fldMobilePhone}}
<br/> phone : {{ctrl.order.customerAddress.fldTelephone}} </td>
</tr>
</tbody>
</table>
<h1>{{ctrl.title}}</h1>
<table dir="rtl" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px;border-top:2px solid #000000;;border-bottom:2px solid #000000;border-color: #000000">
<tbody>
<tr>
<td width="40%" style="padding-right:10px;font-size: 10px" align="right">name</td>
<td width="20%" style="font-size: 10px" align="center">number</td>
<td width="20%" style="font-size: 10px" align="center">price</td>
<td width="25%" style="font-size: 10px" align="right">price</td>
</tr>
<tr ng-repeat="item in ctrl.Components track by $index">
<td style="padding-right:10px;font-size: 9px">
{{item.offer.fldTitle}}<br>
</td>
<td style="font-size: 12px" align="center">{{item.fldQty}}</td>
<td style="font-size: 10px" align="center">{{item.fldUnitPrice}}</td>
<td style="font-size: 10px;padding: 5px">{{item.fldTotalPrice}}</td>
</tr>
</tbody>
</table>
</div>
printdirective.js
myApp.directive("printOrder",["$window","orderService","$timeout","$compile",function($windows,orderService,$timeout,$compile){
return{
restrict:"AE",
bindToController:{
disableBtn:"=",
order:"="
},
templateUrl:"/Widgets/printOrder.template.html",
transclude: true,
scope:true,
controllerAs:"ctrl",
controller:function(){
this.click=function(){
var popupWinindow =$windows.open("", '_blank', 'width=300,height=500');
orderService.getOrderDetail(this.order.id)
.then(function(result){
this.Components=result;
popupWinindow.document.open();
var el=angular.element("#printSection")
$compile(el)(this);
$timeout(function(){
// console.log(el.html());
popupWinindow.document.write(
`<html>
<head></head>
<body style="direction: rtl;">`+el.html()+` </body>
</html>`);
popupWinindow.document.close();
},500)
});
}
},
}
}])
when i clicked on print button .id of order send to directive then detail of order request of server with ajax that this should fill "#printSection" of template by $compile but this dont binding and Components property is empty.
but this dont binding and Components property is empty.
You cannot call $compile with this, in your case $compile(el)(this);
this != scope
Use:
controller:function($scope){
$compile(el)($scope);
}
Small Demo
Is it typo? var el=angular.element("#printSection")
Did you mean something like:
var warapper = document.querySelector('#printSection');
angular.element(warapper); //...
I have this piece of code on my HTML that I fill with Angular:
<table id="myTable">
<tr>
<th>Id</th>
<th>desc</th>
<th>prod kg</th>
<th>index</th>
</tr>
<tr ng-repeat="x in maq" ng-if="{{ x.index }}=='0'" id="{{ x.index }}">
<td style="border: 1px solid black;">{{ x.codigo }}</td>
<td style="border: 1px solid black;">{{ x.desc }}</td>
<td style="border: 1px solid black;">{{ x.prod_24_h_kg }}</td>
<td style="border: 1px solid black;">{{ x.index }}</td>
</tr>
</table>
No problem here so far. However I want to make and ng-if for each row as you can see, and let's say:
{{ x.index }}=='0'
I don't want that row to show up. I have tried many combinations of the " " and ' ' with no succes. Does anyone see the solution?
No need to use interpolation {{}} directive inside ng-if directive, It directly takes an expression which will evaluate against current scope.
ng-if="x.index ==0"
Rather another option to achieve same thing would be use filter.
ng-repeat="x in maq | filter: {index: 0} as filterdMaq"
Same filtering thing can happen inside controller which would help to improve performance as well.
$http.get('data.json').then(function(response){
$scope.dataCopy = response.data; //this is original copy of an maq.
//filtered maq
$scope.maq = $filter('filter')(angular.copy($scope.dataCopy), { index: 0}, true);
});
You don't need to use {{ }}. Just print x.index=='0'
I am New For Angular-js Please Heip On Coding With Dynamic Table Creation .I added Some Records Helping With Json Ang ng-model but How To Remove Current Record When Click On Remove Button.
Passing With This Operator.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.emplist = [
{empname:'samudrala',empsalary:'4.5 - pam',empid:'Emp - 450'},
{empname:'soujanya',empsalary:'4.5 - pam',empid:'Emp - 451'},
{empname:'suguna',empsalary:'4.5 - pam',empid:'Emp - 452'},
{empname:'sangeetha',empsalary:'4.5 - pam',empid:'Emp - 453'},
{empname:'sadhanandham',empsalary:'4.5 - pam',empid:'Emp - 454'},
{empname:'jai',empsalary:'4.5 - pam',empid:'Emp - 455'},
{empname:'vijay',empsalary:'4.5 - pam',empid:'Emp - 456'},
{empname:'Ajay',empsalary:'4.5 - pam',empid:'Emp - 457'},
{empname:'Sandya',empsalary:'4.5 - pam',empid:'Emp - 458'},
{empname:'Raamu',empsalary:'4.5 - pam',empid:'Emp - 459'}
];
$scope.addItem = function(){
$scope.emplist.push({'empname':$scope.empname,'empsalary':$scope.empsalary,'empid':$scope.empid});
$scope.empname = '';
$scope.empsalary = '';
$scope.empid = '';
}
$scope.remItem = function(x){
$scope.emplist.splice(x,1);
}
});
body{
font-size: 14px;
font-family: Arial;
color:#333;
}
<!DOCTYPE Html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table style="width:100%;">
<tr height="25" style=" background: #99ff00;">
<th width="5%"></th>
<th width="40%">EMP Name</th>
<th width="30%">EMP Salary</th>
<th width="25%">EMP ID</th>
</tr>
<tr height="25" ng-repeat="x in emplist">
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{$index}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{$index}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd" >{{x.empname}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even" >{{x.empname}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empsalary}}</td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empsalary}}</td>
<td style="text-align: center; background: #99ff00;" ng-if="$odd">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
<td style="text-align: center; background: #00ff00;" ng-if="$even">{{x.empid}} <button ng-click="remItem();" style="background:#00ffff; border:0px;">× Remove</button></td>
</tr>
<tr height="25">
<td><button ng-click="addItem();" style="background: #00ffff; border:0px; width:100%; height:100%;">Add</button></td>
<td style="padding:2px;"><input type="text" ng-model="empname" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empsalary" style="width:100%;" ></td>
<td style="padding:2px;"><input type="text" ng-model="empid" style="width:100%;" ></td>
</tr>
</table>
</div>
</body>
</html>
Instead of showing the table row for each record, use ng-repeat
<tr ng-repeat="emp in emplist">
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td>{{emp.name}}</td>
<td><button ng-click="remItem($index)">Remove</button></td>
And inside the controller directly you can get the $index
$scope.remItem = function(itemIndex){
$scope.emplist.splice(itemIndex,1);
}
Please Pass Current Index in your function
<button ng-click="remItem(x,$index);" > Remove</button>
$scope.remItem = function(x,index){
$scope.emplist.splice(index,1);
}
It will help you !!!
Try this
<button ng-click="remItem(x);" > Remove</button>
and in controller
$scope.remItem = function(item){
var index = $scope.emplist.indexOf(item);
$scope.emplist.splice(index,1);
}
**You can delete the row based on index **
<button title="Remove" ng-click="removeFile($index)"></button>
$scope.removeFile = function (index) {
if (!confirm("Are you sure you want to remove?")) {
return;
}
$scope.emplist.splice(index, 1);}
I have a code like this:
<tr ng-repeat="tagJson in tagList">
<div ng-repeat="(key, value) in tagJson">
<td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{key}}
</td>
<td width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{value}}
</td>
</div>
</tr>
where tagList is :
[{a:1},{a:1}]
But the key and value are empty! Not sure why thats the case. If i try to print tagJson in the html like:
{{tagJson}}
it does print:
{a:1}
{a:1}
but key and value doesnt work!
Where I'm making the mistakes?
See here:
http://jsfiddle.net/Vwsej/126/
The actual reason why you don't see anything is, as akonsu posted, because you're producing invalid html.
To keep the values in seperate table cells, you can use ng-repeat-start/end, e.g.:
var MainCtrl = function () {
this.tagList = [{a:1}, {b:2}];
};
angular
.module('app', [])
.controller('Main', MainCtrl)
;
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="Main as main">
<table>
<tr ng-repeat="tagJson in main.tagList">
<td ng-repeat-start="(key, value) in tagJson" width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{key}}
</td>
<td ng-repeat-end width="48%" ng-class-odd="'evn'" ng-class-even="'odd'">
{{value}}
</td>
</tr>
</table>
</div>
You do not see anything because this is invalid markup for the table. You have div elements inside.
maybe this?
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="tagJson in tagList">
<td ng-repeat="(key, value) in tagJson">
{{key}}={{value}}
</td>
</tr>
</table>
</div>
but to emit the markup that you wanted, I think you need a custom directive for that.