Unable to display data using AngularJS ng-repeat with table. - angularjs

i am trying to display data in a table using angularJS ng-repeat. Data is not displayed. Here is my code : https://jsfiddle.net/807mxydL/. Thanks for your help
var custApp = angular.module('custApp', []);
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs =
[{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
};
};
HTML code:
<div ng-app="custApp">
<div ng-controller="CustomerControlleras customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>

Try like this
you have some mistakes.
1: <div ng-controller="CustomerController as customer">
2:forgot put ) in end of controller
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs = [{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="custApp">
<div ng-controller="CustomerController as customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>

Related

Angularjs hide row if another row is selected

I have a html/angularjs table that contains the ff :
<tbody ng-repeat="x in Persons">
<tr>
<td>{{x.FirstName}}</td>
<td>{{x.LastName}}</td>
<td>{{x.Department}}</td>
<td>
<a href"#" data-ng-click="x.show = !x.show">
Sales Details
</a>
</td>
</tr>
<tr>
<td ng-show="x.show">
<!--user sales details here-->
</td>
</tr>
</tbody>
Currently, if I click on the first row it shows the details but I need to click it again to hide it. I want to hide the first row details if the 2nd row is clicked. How do I go about this?
Try this. i hope this what exactly what you want.
var app = angular.module("app", []);
app.controller("name", function($scope) {
$scope.Persons=[{"FirstName":"Ramesh","show":false},{FirstName:"Suresh","show":false}];
$scope.showorhide = function(index){
var currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<table>
<tbody ng-repeat="x in Persons">
<tr>
<td>First Name</td>
<td>
<a href"#/" style="color:red" ng-click="showorhide($index)">
open/close
</a>
</td>
</tr>
<tr ng-show="x.show">
<td >
{{x.FirstName}}
</td>
</tr>
</tbody>
</table>
</div>
you need a method for this
take a look
https://stackblitz.com/edit/js-tv6dog?file=index.js
js:
$scope.clicked = function(index){
let currentOption=$scope.Persons[index].show;
$scope.Persons.forEach(x=>x.show=false);
$scope.Persons[index].show=!currentOption;
}
html
<td>
<a href"#" data-ng-click="clicked($index)">
Sales Details
</a>
</td>
and of course add track by to ng-repeat
<tbody ng-repeat="x in Persons track by $index">

handling two ng-repeat in same table

I have a list of images saved in var images, and a list of names saved in var searchName, now I need to display images along with name, but I could display it after all images displayed only.
HTML:
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
</tr>
<tr ng-repeat = "item in searchName">
<td>{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
How about merge this two into single Array and use ng-repeat.
var app = angular.module("app", []);
app.controller("controller", function($scope) {
$scope.images = ['https://angularjs.org/img/AngularJS-large.png', 'http://build.acl.com/assets/tech-logos/angular-03fcc4cfc89d9b310265e7d1e01ee0aef405abf6c632f59342b18848e1c02587.svg'];
$scope.searchName = ["Angular-Logo", "Angular-SVG-Image"];
$scope.intrArr = mapImageAndName();
function mapImageAndName() {
var mappedArr = [];
for (var i = 0; i < $scope.images.length; i++) {
mappedArr.push({
'image': $scope.images[i],
'name': $scope.searchName[i]
});
}
return mappedArr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row col-sm-12" ng-app="app" ng-controller="controller">
<table class="displayImg col-sm-3">
<tr ng-repeat="obj in intrArr">
<td>
<img ng-src="{{obj.image}}" class="imageShow" />
</td>
<td>
{{obj.name}}
</td>
</tr>
</table>
</div>
You could use nested ng-repeat.
<div class="row col-sm-12" >
<table class="displayImg col-sm-3">
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td ng-repeat = "item in searchName">
{{item[0].profileInfo.firstname}} </td>
</tr>
</table>
</div>
Look into AngularJS ng-repeat document.
There is a term called ng-repeat-start and ng-repeat-end
AngularJS ng-repeat Document
<tr ng-repeat = "image in images">
<td><img ng-src="{{image}}" class="imageShow"/> </td>
<td>{{searchName[$index][0].profileInfo.firstname}} </td>
</tr>

html2canvas and pdfmake create blank pdf

I'm trying to generate a pdf from an html div with html2canvas and pdfMake but always got a blank page or just part of the div! How can I get the entire div content?
Here is the js code :
$scope.PrintFiche = function () {
var prom = new Promise(function (resolve, reject) {
html2canvas(document.getElementById('DevisImpression'), {
onrendered: function (canvas) {
var data = canvas.toDataURL("image/png");
var docDefinition = {
content: [{
image: data
}]
};
resolve(docDefinition);
}
});
})
prom.then(function (docDef) {
pdfMake.createPdf(docDef).download($scope.FicheName + ".pdf");
})
}
And the html :
<div class="Partie" id="DevisImpression">
<div id="PartieInner">
<h2 id="TitreDevis">
<b>
Etablissement du devis
</b>
</h2>
<div id="ImgVoitureDevis">
<img id="ImgVoitureAdapt" src="../../Assets/Images/test.jpg" />
</div>
<div id="OptMult">
<table id="TableDevis">
<tr>
<td class="td1">
Modèle :
</td>
<td class="td2">
{{modele.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Classe :
</td>
<td class="td2">
{{classe.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Moteur :
</td>
<td class="td2">
{{moteur.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Couleur :
</td>
<td class="td2">
{{couleur.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Jantes :
</td>
<td class="td2">
{{jante.displayName}}
</td>
</tr>
</table>
</div>
<table id="Devis">
<tr>
<th class="tdDevis2">
Options
</th>
<th class="tdDevis2">
Prix
</th>
</tr>
<tr ng-repeat="optionDev in optionsDevis">
<td class="td3">
{{optionDev.displayName}}
</td>
<td class="td4">
{{optionDev.prix}} €
</td>
</tr>
</table>
</div>
<h2 id="TotalTitre">
<b>
TOTAL
</b>
</h2>
<input type="text" id="Total" value="{{total}} €" disabled />
<br />
</div>
I have a simple solution. Try this.
$scope.downloadQuotation = function () {
html2canvas(document.getElementById('rosterPrintView'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("Roster.pdf");
}
});
};

ng-repeat not binding event though I'm getting data

Forgive me because I'm relatively new to AngularJS. I have a situation where I am calling to a WebApi webservice. I have two pages, one that binds and one that doesn't, with the same code in both. I can see that the webservice is being hit and IS returning data. Any idea what the problem could be??
This is the data that is being returned by the webservice:
[{"id":1,"name":"Chester" , "gender":"Male" , "salary":25000},
{"id":2,"name":"Mary" , "gender":"Female" , "salary":15000},
{"id":3,"name":"Tim " , "gender":"Male" , "salary":22000},
{"id":8,"name":"Wayne", "gender":"Male" , "salary":81231}]
The code that works is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/EmployeeAngular.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="MyModule">
<div ng-controller="MyController" ng-init="initController">
{{MadeItHereMessage}}
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The code that doesn't work is here:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/EmployeeAngular.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="EmployeeApplication">
<div ng-controller="EmployeeController" ng-init="AngularInit()">
{{Message}}
<br/>
{{DisplayAction}}
<br />
<!--The following is for listing the entire list of employees-->
<div id="listSection" ng-show="DisplayAction=='List'">
<!--The employees data is: {{employees}}-->
<!--<div id="listSection">-->
<table>
<thead>List of defined Employees</thead>
<tr>
<!--<td><button id="btnCreateNew" type="button" value="Create Employee" ng-click="CreateNewEmployee()"></button></td>-->
</tr>
<tr>
<td ng-show="gotdata">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
<!--<table id="EmployeeList">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="for employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td><button type="button" value="Details" ng-click="ShowDetails({{employee.id}})"></button></td>
<td><button type="button" value="Delete" ng-click="DeleteEmployee({{employee.id}})"></button></td>
<td><button type="button" value="Edit" ng-click="EditEmployee({{employee.id}})"></button></td>
</tr>
</tbody>
</table>-->
</td>
</tr>
</table>
</div>
<!--The following is for listing the details of a single employee-->
<!--<div id="DetailsSection" ng-show="DisplayAction=='Details'">
<table>
<tr>
<td>ID:</td>
<td> <input id="DetailsID" value={{id}} /></td>
</tr>
<tr>
<td>Name:</td>
<td><input id="DetailsName" value={{name}} /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="DetailsGender" value={{gender}} /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="DetailsSalary" value={{salary}} /> </td>
</tr>
<tr>
<td>
<button id="NavTolist" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDelete" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
<td>
<button id="NavToEdit" type="button" value="Edit" ng-click="EditEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for editing a employee-->
<!--<div id="EditSection" ng-show="DisplayAction=='Edit'">
<table>
<tr>
<td>ID:</td>
<td>
<input id="ID" value={{id}} />
</td>
</tr>
<tr>
<td>Name:</td>
<td><input id="" value={{name}} ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value={{gender}} ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value={{salary}} ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="EditUpdate" type="button" value="Update" ng-click="EditUpdate()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
<td>
<button id="NavToDeleteEdit" type="button" value="Delete" ng-click="DeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for verification of deletion-->
<!--<div id="DeletionSection" ng-show="DisplayAction=='Delete'">
<table>
<tr>
<td>Do you really want to delete {{name}}</td>
<td></td>
<td>
<button id="btnCancelDelete" type="button" value="No"></button>
</td>
<td>
<button id="btnDeleteEmployee" type="button" value="Yes" ng-click="DoDeleteEmployee({{id}})"></button>
</td>
</tr>
</table>
</div>-->
<!--The following is for creation of a employee-->
<!--<div id="CreationSection" ng-show="DisplayAction=='Create'">
<table>
<tr>
<td>Name:</td>
<td><input id="" value="" ng-bind="name" /> </td>
</tr>
<tr>
<td>Gender:</td>
<td><input id="" value="" ng-bind="gender" /> </td>
</tr>
<tr>
<td>Salary:</td>
<td><input id="" value="" ng-bind="salary" /> </td>
</tr>
<tr>
<td>
<button id="btnCreateEmployee" type="button" value="Delete" ng-click="CreateEmployee()"></button>
</td>
<td>
<button id="NavTolistEdit" type="button" value="Back to List" ng-click="DisplayList()"></button>
</td>
</tr>
</table>
</div>-->
</div>
</body>
</html>
I am getting the heading, but no actual data from the web service.
The angularjs javascript file is here:
var app = angular.module("EmployeeApplication", [])
.controller("EmployeeController",
function ($scope, $http) {
AngularInit();
function AngularInit()
{
//This will be called once per form load, via the ng-load function on the div
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = '';
$scope.gotdata = false;
DisplayList();
}
function GetAllEmployees($http) {
//$scope.Message = 'NULL';
//$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = 'OK';
$scope.go = true;
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.employees = {};
$scope.gotdata = false;
}
);
window.setTimeout(function () {
$scope.gotdata = true;
}, 1000);
};
function DisplayList() {
//call the web service to get the list of people
//set the display action so that the list will be displayed
GetAllEmployees($http)
$scope.DisplayAction = 'List';
};
function CreateNewEmployee() {
$scope.name = '';
$scope.gender = '';
$scope.salary = '';
$scope.id = '';
$scope.DisplayAction = 'Create';
};
function ShowDetails(id) {
//call the web service to get the details of the person
//Set the $scope.CurrentEmployee
$scope.DisplayAction = 'Details';
};
function CreateEmployee() {
//perform the actual creation based on $scope.CurrentEmployee
//if successful
DisplayList();
};
function DeleteEmployee(id) {
$scope.DisplayAction = 'Delete';
};
function DoDeleteEmployee(id) {
//Perform actual deletion
//if successful
DisplayList();
};
function EditEmployee(id) {
//get the employee based on ID
$scope.DisplayAction = 'Edit';
};
function EditUpdate() {
//perform the actual update based on $scope.id
//if successful
DisplayList();
};
}
);
var app = angular.module("MyModule", []).controller("MyController", function ($scope, $http)
{
$scope.MadeItHereMessage = 'We made it to the controller (first controller)';
$scope.employees = {};
$http.get('http://localhost:65315/api/employee').then(function (response) {
$scope.employees = response.data;
$scope.Message = "OK";
},
function (err)
{
$scope.Message = "Call failed" + err.status + " " + err.statusText;
}
);
});
Replace the call to window.setTimeout with the $timeout service.
//window.setTimeout(function () {
//Use $timeout service
$timeout(function() {
$scope.gotdata = true;
}, 1000);
The $timeout service is properly integrated with the AngularJS digest cycle. Changes to $scope made with setTimeout are not immediately seen by the AngularJS framework.
For more information, see AngularJS $timeout Service API Reference
Your template is loaded before you get the http data. So a solution is to display the template when the ressource is loaded with ng-if.
Can you try:
<tr ng-repeat="employee in employees" ng-if="employees && employees!={undefined}">
First you don't need to pass the $http into your "GetAllEmployees"-Function because it's already there!
Second, I would suggest to use the "$q" to save the response into a variable. Check this out

Creating dynamic invoice with angularjs

I try to create a dynamic invoice, i have quantity and price column, and then i get total Value Of Products, so when i change value of quantity, price and total value should be changed, i find a way to change price but total value does not work:
<div class="container" ng-controller="OrderController" ng-init="quantity=1">
<div id="order-detail-content" class=" row">
<table id="cart_summary">
<thead>
<tr>
<th>Total</th>
<th> </th>
<th>Qty</th>
<th>Unit price</th>
<th>Availability</th>
<th>Description</th>
<th>Product</th>
</tr>
</thead>
<tfoot>
<tr class="cart_total_price">
<td colspan="2" class="price" id="total_product">{{totalValueOfProducts}}</td>
<td colspan="3" class="text-right">Total</td>
<td rowspan="4" colspan="3" id="cart_voucher" class="cart_voucher"></td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="order in Orders track by $index" >
<td class="cart_total" data-title="Total">
<span class="price" id="total_product_price_3_13_0">
{{order.Price * quantity}}
</span>
</td>
<td >
<input size="2" ng-model="quantity" type="text" value="1" name="quantity_3_13_0_0">
</td>
<td>
<ul class="price text-right" id="product_price_3_13_0">
<li ng-model="order.Price" class="price"> {{order.Price}}</li>
</ul>
</td>
<td class="cart_description">
<p style="color:black" class="product-name">{{order.ProductName}}</p>
<hr />
<small style="color:black" class="cart_ref">{{order.ProductDescription}}</small>
</td>
<td class="cart_product">
<img ng-src="" alt="Printed Dress" width="98" height="98">
</td>
</tr>
</tbody>
</table>
</div> <!-- end order-detail-content -->
and in controller i define $watch on quantity :
<script>
app.controller('OrderController', function ($scope, $http) {
$scope.Orders = {};
$scope.GetOrders = function () {
$http.get('/Order/GetAllOrders').success(function (response) {
$scope.Orders = response;
//debugger;
GetTotalValueOfProducts(response);
});
}
$scope.GetOrders();
GetTotalValueOfProducts = function (response) {
//debugger;
$scope.totalValueOfProducts = 0;
for (var i = 0; i < response.length; i++) {
$scope.totalValueOfProducts += response[i].Price * $scope.quantity;
}
}
$scope.$watch('quantity', function () {
debugger;
$scope.GetOrders();
});
});
</script>
when i changed value of quantity, the value of totalValueOfProducts was not changed!why $watch did not work? what is the problem?
'quantity' needs to be in the $scope for the binding to take place
on a separate note, it would be better to move all data (orders, quantity etc) into a service, it would better adhere to angular's MVC paradigm

Resources