Now I have some directives which are used in some place, in one place I need to load the data to init them( if there are no data, keep it blank). Here is the template of one of the directives:
<div class="col-lg-12" style='z-index: 99998;'>
<span class="col-lg-12 col-md-12 right-inner-addon typeAhead">
<i class="glyphicon glyphicon-search" ng-show="isBillToEmpty"></i> <i ng-click="cleanBillTo()"
class="glyphicon glyphicon-close" ng-show="!isBillToEmpty" ></i></a> <input class="data "
id="billTo" ng-model="billTo"
typeahead=" billTos.ID as billTos.VALUE for billTos in getBillTos($viewValue)"
typeahead-input-formatter="formatBillToText($model)" type="text">
</span>
</div>
<div class="col-lg-12">
<span class="col-md-12"> <label id="labelBillTo" for="billTo">{{billToLabel}}</label>
</span>
</div>
DirectiveJS:
function($scope, BillToService) {
$scope.billTos = {};
$scope.billTo = '';
$scope.billToLabel = 'Bill To'
$scope.isBillToEmpty = true;
$scope.formatBillToText = function(model) {
for (var i = 0; i < $scope.billTos.length; i++) {
if (model === $scope.billTos[i].ID) {
return $scope.billTos[i].VALUE;
}
}
}
$scope.$watch('billTo', function() {
$scope.billToID = $scope.billTo;
if($scope.billTo.length > 0){
$scope.isBillToEmpty = false;
}else{
$scope.isBillToEmpty = true;
}
});
$scope.cleanBillTo = function() {
$scope.billTo = "";
$scope.billToID = "";
};
$scope.billTos = [{'ID':$scope.billToID,'VALUE':$scope.initialBillToText}];
$scope.billTo = $scope.billToID;
$scope.getBillTos = function(billToText) {
var promise = BillToService.getBillTos(billToText,
$scope.user.expenServerID);
promise.then(function(billTosInformation) {
$scope.billTos = billTosInformation;
});
$scope.billTos = BillToService.getBillTos(billToText,
$scope.user.expenServerID);
return $scope.billTos;
};
} ]).directive('smartBillTo', function() {
return {
restrict : 'E',
controller : "BillToCtrl",
templateUrl : 'components/directives/billTo/bill-to.html'
}
<table id='AllocationTable' ng-controller='maincontroller' class="table table-hover">
<thead>
<tr>
<th class="text-left">
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</th>
<th class="text-center">Charge To Dept
</th>
<th class="text-center">Sub Account
</th>
<th class="text-center">Activity
</th>
<th class="text-center">Category
</th>
<th class="text-center">Bill To
</th>
<th class="text-center">Expense Item
</th>
<th class="text-center">Percentage
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in datalist'>*How can I pass data to <smart-billTo>*
<td class="text-left">
<input type="checkbox" ng-model=''/>
</td>
<td class="text-center"><smart-department ></smart-department></td>
<td class="text-center"><input type='text' ng-model=''/></td>
<td class="text-center"><input type='text' ng-model=''/></td>
<td class="text-center"><input type='text' ng-model=''/></td>
<td class="text-center"><smart-bill-to></smart-bill-to></td>
<td class="text-center"><smart-item ></smart-item></td>
<td class="text-center"><input type='text' ng-model=''/></td>
</tr>
</tbody>
</table>
In the maincontroller I get data from service to init the directive value:
$scope.datalist = Someservice.getdata();
How can I pass data into directives to init the input value (such as bill-to).
Related
I have a table list and loading lazily with pagination - only 5 items at a time. Sorting & pagination working fine,even search also working but only current page. Total list size is 788, When the user clicks the next page another 5 are loaded etc. However I also want to have an option of searching for an item within the full list - not the lazy list.
MY HTML:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" ba-panel ba-panel-title="Requirement Details" ba-panel-class="with-scroll" >
<form class="form-inline">
<div class="form-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
<div class="horizontal-scroll">
<div ng-init="reqTableData(1)"> </div>
<table class="table" >
<thead>
<tr class="sortable ">
<th style="width:5%" ng-click="sort('reqID',1)"> ID
<span class="glyphicon sort-icon" ng-show="sortBy=='reqID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('reqName',1)">Name
<span class="glyphicon sort-icon" ng-show="sortBy=='reqName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:20%" ng-click="sort('description',1)">Description
<span class="glyphicon sort-icon" ng-show="sortBy=='description'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:10%" ng-click="sort('reqType',1)">Type
<span class="glyphicon sort-icon" ng-show="sortBy=='reqType'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('creationTime',1)">Created On
<span class="glyphicon sort-icon" ng-show="sortBy=='creationTime'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:20%" ng-click="sort('status',1)">Status
<span class="glyphicon sort-icon" ng-show="sortBy=='status'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('priority',1)">Priority
<span class="glyphicon sort-icon" ng-show="sortBy=='priority'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('lastModified',1)">Modified On
<span class="glyphicon sort-icon" ng-show="sortBy=='lastModified'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
</tr>
</thead>
<tbody >
<tr dir-paginate="item in reqTableDetails|orderBy:sortBy:reverse|filter:search|itemsPerPage: 5" total-items="reqdata">
<td style="width:5%">{{item.reqID}}</td>
<td style="width:15%" class="trim-info" title="{{item.reqName}}">{{item.reqName|limitTo:10}}{{item.reqName.length>10 ? '...' : ''}}</td>
<td style="width:20%" class="trim-info" title="{{item.description}}">{{item.description|limitTo:25}}{{item.description.length>25 ? '...' : ''}}</td>
<td style="width:10%">{{item.reqType}}</td>
<td style="width:15%">{{item.creationTime | date:'MM/dd/yyyy'}}</td>
<td style="width:20%">{{item.status}}</td>
<td style="width:15%">{{item.priority}}</td>
<td style="width:15%">{{item.lastModified | date:'MM/dd/yyyy'}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls directions-links="true"
boundary-links="true"
on-page-change="reqpageChangedLevel(newPageNumber)"></dir-pagination-controls>
</div>
</div>
</div>
Controller.js
$scope.reqpageChangedLevel=function(pageno){
$rootScope.pageno = pageno;
if($rootScope.domain == null || $rootScope.domain == null || $rootScope.domain == ""){
{
if( $scope.sortBy=="")
{
$scope.reqTableData ($rootScope.pageno) ;
}else
{
$scope.sortedtable($scope.sortBy,$rootScope.pageno,$scope.reverse);
}
}
}
else
{
$scope.level1 = $rootScope.domain ;
$scope.level2 = $rootScope.project ;
$scope.level3 = $rootScope.release ;
if( $scope.sortBy=="")
{
$scope.reqtabledataLevel($scope.level1,$scope.level2,$scope.level3,$rootScope.pageno);
}else
{
$scope.sortedtableLevel($scope.level1,$scope.level2,$scope.level3,$scope.sortBy,$rootScope.pageno,$scope.reverse);
}
}
};
var vm = this;
vm.total_count = 0;
$scope.itemsPerPage = 5;
// Table on-load
$scope.reqTableData = function(start_index){
$scope.index=start_index;
$http.get("./rest/requirementServices/reqTableDetails?&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index).success(function (response) {
$scope.reqTableDetails = response;
}) ;
};
// Table on drop down change with level id
$scope.reqtabledataLevel = function(level1,level2,level3,start_index){
$scope.index = start_index;
$scope.smartTablePageSize = 5;
$http.get("./rest/requirementServices/reqTableDetailsLevel?level1="+level1+"&level2="+level2+"&level3="+level3+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index).success(function (response) {
$scope.reqTableDetails = response;
}) ;
}
// Sort function starts here
$scope.sort = function(keyname,start_index){
$scope.sortBy = keyname;
$scope.index=start_index;
$scope.reverse = !$scope.reverse;
if($rootScope.domain == null || $rootScope.domain == null || $rootScope.domain == ""){
$scope.sortedtable ($scope.sortBy,$scope.index,$scope.reverse) ;
}
else
{
$scope.level1 = $rootScope.domain ;
$scope.level2 = $rootScope.project ;
$scope.level3 = $rootScope.release ;
$scope.sortedtableLevel($scope.level1,$scope.level2,$scope.level3,$scope.sortBy,$scope.index,$scope.reverse);
}
};
//Table on-load with sort implementation
$scope.sortedtable =function(sortvalue,start_index,reverse)
{
$scope.column=sortvalue;
$scope.index=start_index;
$scope.order=reverse;
$http.get("./rest/requirementServices/requirementsData?sortvalue="+$scope.column+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index+"&reverse="+$scope.order).success(function (response) {
$scope.reqTableDetails = response;
}) ;
}
// Table on drop down change with sort implementation
$scope.sortedtableLevel =function(level1,level2,level3,sortvalue,start_index,reverse)
{
$scope.column=sortvalue;
$scope.index=start_index;
$scope.order=reverse;
$http.get("./rest/requirementServices/requirementsDataLevel?sortvalue="+$scope.column+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index+"&reverse="+$scope.order+"&level1="+$scope.level1+"&level2="+$scope.level2+"&level3="+$scope.level3).success(function (response) {
$scope.reqTableDetails = response;
}) ;
}
/* Lazy Load Table Ends Here */
I've tried with code in controller.js but its not working, so that i removed.
How can i keep my list displayed lazily but have the search box filter items from my full list.
I'm figuring out the same issue. To properly test I tried to load elements either in single call or lazy load. In case of lazy loading $filter doesn't work.
The search filter only finds the records from the current page. And I want it to search from all the pages. I have used $scope.watch but I guess I am lacking knowledge in that. How shall I do it? Greatly appreciate the help. Thanks.
HTML:
<md-input-container flex>
<label>Search Participant</label>
<input ng-model="search" type="text" style="cursor: pointer;"/>
</md-input-container>
<div class="search-container">
<md-table-container>
<form class="epForm">
<table md-table md-row-select multiple >
<thead md-head>
<tr md-row>
<th md-column><span><!-- <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/> -->Select</span>
</th>
<th md-column><span>Endpoint Name</span></th>
<th md-column><span>Endpoint Aliase</span></th>
<th md-column><span>Endpoint Protocol</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | startFrom:currentPage*pageSize | limitTo:pageSize | filter: search ">
<td md-cell><input type="checkbox" ng-model="endpoint.Selected" ng-change="endpointsSelected(endpoint)"/></td>
<td md-cell>{{endpoint.partName}}</td>
<td md-cell>{{endpoint.partSignalId}}</td>
<td md-cell>{{endpoint.partSignalType}}</td>
</tr>
<tr>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"
style="background: transparent;border: aliceblue;">
<img src="./images/previous.jpg"/>
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= endpoints.length/pageSize - 1" ng-click="currentPage=currentPage+1"
style="background: transparent;border: aliceblue;">
<img src="./images/next.jpg"/>
</button>
</tr>
</tbody>
</table>
</form>
</md-table-container>
</div>
JS:
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.$watch('search', function (v) {
$scope.currentPage = 0;
$scope.numberOfPages();
//$scope.pages = $scope.range();
}, true);
LoadingShow();
PinnacaService.getEndpointList(
$rootScope.admin.session_key,
$rootScope.room,
function(data, status){
$scope.endpoints = data;
$scope.numberOfPages=function(){
return Math.ceil($scope.endpoints.length/$scope.pageSize);
}
LoadingHide();
},
function(data, status){
if(status == 403){ //session timeout
alert($scope.$parent.lang.session_timeout);
$scope.$parent.logout();
}
$scope.msg_error = true;
$scope.msg_error_status = status;
$scope.msg_error_text = data;
LoadingHide();
});
myApp.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
Modify following code
<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | startFrom:currentPage*pageSize | limitTo:pageSize | filter: search ">
With
<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | filter: search | startFrom:currentPage*pageSize | limitTo:pageSize ">
I am learning to develop crud orations by using angular js and asp.net MVC. I've currently developed this solution. My Insert function is working correctly but my display data (GetEmployeeById) in text fields doesn't work properly can anyone point me out where I am doing wrong thank you.
My View
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<table style="margin-bottom: 10px;">
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Address
</th>
<th>
City
</th>
<th>
Region
</th>
<th>
Postal Code
</th>
</tr>
<tr>
<td>
<input type="text" name="employee.FirstName" ng-model="employee.FirstName" value="{{employee.FirstName}}" />
</td>
<td>
<input type="text" name="employee.LastName" ng-model="employee.LastName" value="{{employee.LastName}}" />
</td>
<td>
<input type="text" name="employee.Address" ng-model="employee.Address" value="{{employee.Address}}" />
</td>
<td>
<input type="text" name="employee.City" ng-model="employee.City" value="{{employee.City}}" />
</td>
<td>
<input type="text" name="employee.Region" ng-model="employee.Region" value="{{employee.Region}}" />
</td>
<td>
<input type="text" name="employee.PostalCode" ng-model="employee.PostalCode" value="{{employee.PostalCode}}" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Save" name="btnSave" ng-click="savedata(employee)" class="btn btn-primary" />
</td>
</tr>
</table>
<div class="row" >
<table class="table table-bordered table-condensed">
<tr>
<th>
Employee ID
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Address
</th>
<th>
City
</th>
<th>
Region
</th>
<th>
Postal Code
</th>
<th>
Select Employee
</th>
</tr>
<tr ng-repeat="e in employees">
<td>{{e.EmployeeID}}</td>
<td>{{e.FirstName}}</td>
<td>{{e.LastName}}</td>
<td>{{e.Address}}</td>
<td>{{e.City}}</td>
<td>{{e.Region}}</td>
<td>{{e.PostalCode}}</td>
<td>
Select
</td>
</tr>
</table>
</div>
My Controller
public class EmployeeController : Controller
{
NorthwindEntities _db=new NorthwindEntities();
// GET: Employee
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployee()
{
return Json(_db.Employees.Select(x=>new
{
x.EmployeeID,x.FirstName,x.LastName,x.Address,x.City,x.Region,x.PostalCode
}), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult SaveEmployee(Employee employee)
{
_db.Employees.Add(employee);
_db.SaveChanges();
return Json(_db.Employees.Select(x => new { x.EmployeeID,x.FirstName, x.LastName, x.Address, x.City, x.Region, x.PostalCode }), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult GetEmployeeById(int EmployeeID)
{
Employee employee = _db.Employees.Find(EmployeeID);
return Json(employee, JsonRequestBehavior.AllowGet);
}
}
My angular Js app Controller
var myApp = angular.module('myApp', []);
myApp.controller('employeeCtrl', function ($scope, $http)
{
$scope.employees = "";
$http.get("/Employee/GetEmployee").success(function (result) {
$scope.employees = result;
}).error(function(result) {
console.log("Error");
});
$scope.savedata = function (employee) {
debugger;
$http.post("/Employee/SaveEmployee", { employee: employee }).success(function (result) {
debugger;
$scope.employees = result;
}).error(function(result) {
console.log("Error");
});
}
$scope.employee = "";
$scope.selectEmployee = function (EmployeeID) {
debugger;
$http.post("/Employee/GetEmployeeById/", { EmployeeID: EmployeeID }).success(function (result) {
debugger;
$scope.employee = result;
}).error(function(result) {
alert(result.message);
});
}
});
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
I want to calculate taxes in relation with a user-input that correspond to the price.
I have no problem when I don't use ng-repeat. But I can't figure out how to make it works with ng-repeat. For information, the code below refers to an invoice controller where I add items to the invoice.
Here is what I have:
Controller
App.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {
$scope.factureId = $stateParams.factureId;
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
$scope.ajouterItem = function(){
$scope.facture.items.push({});
}
});
$scope.calculTps = function() {
$scope.item.tps = $scope.item.prix*5/100;
};
$scope.calculTvq = function() {
$scope.item.tvq = $scope.item.prix*9.975/100;
};
$scope.calculGrandTotal = function() {
$scope.item.grandtotal = parseFloat($scope.item.prix)+parseFloat($scope.item.tps)+parseFloat($scope.item.tvq);
};
});
Here is my HTML file
<table class="table">
<thead>
<tr>
<th><strong>Description</strong></th>
<th class="text-right"><strong>Prix</strong></th>
<th class="text-right"><strong>TPS</strong></th>
<th class="text-right"><strong>TVQ</strong></th>
<th class="text-right"><strong>Grand Total</strong></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in facture.items">
<td class="bold" width="50%">
<input type="text" class="form-control" name="description" id="description" ng-model="item.description"></td>
<td class="text-right">
<input type="text" class="form-control" name="prix" id="prix" ng-model="item.prix"></td>
<td class="text-right">
<input type="text" class="form-control" name="tps" id="tps" ng-model="item.tps" value="{{calculTps()}}"></td>
<td class="text-right">
<input type="text" class="form-control" name="tvq" id="tvq" ng-model="item.tvq" value="{{calculTvq()}}"></td>
<td class="text-right">
<input type="text" class="form-control" name="grandtotal" id="grandtotal" ng-model="item.grandtotal" value="{{calculGrandTotal()}}">
</td>
</tr>
<tr>
<td class="bold"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">Grand Total</td>
</tr>
</tbody>
</table>
And here is what {{facture.items | json}} returns
[
{
"id": 1,
"facture_id": 10200,
"description": "Item numéro 1",
"prix": "15.00",
"tps": "0.75",
"tvq": "1.50",
"grandtotal": "17.25",
"created_at": "2015-02-21 15:07:18",
"updated_at": "2015-02-21 15:07:18"
},
{
"id": 2,
"facture_id": 10200,
"description": "Deuxième item quoi",
"prix": "135.00",
"tps": "6.75",
"tvq": "13.47",
"grandtotal": "155.22",
"created_at": "2015-02-21 15:07:18",
"updated_at": "2015-02-21 15:07:18"
}
]
So, I would like the "tps" and the "tvq" to calculate automaticly when I enter a number in the "prix" input. I wonder what is wrong.
In your javascript you still need to refer to 'item' as part of the 'facture' array. The controller doesn't know what '$scope.item' is. You can use '$index' to call a function which will do your calculations for each element in the array.
App.controller('FacturesSoloController', function($scope, $stateParams, Facture ) {
$scope.factureId = $stateParams.factureId;
Facture.get({ id: $stateParams.factureId }, function(data) {
$scope.facture = data;
$scope.ajouterItem = function(){
$scope.facture.items.push({});
}
});
$scope.calculTps = function(i) {
$scope.facture.items[i].tps = $scope.facture.items[i].prix*5/100;
};
$scope.calculTvq = function(i) {
$scope.facture.items[i].tvq = $scope.facture.items[i].prix*9.975/100;
};
$scope.calculGrandTotal = function(i) {
$scope.facture.items[i].grandtotal = parseFloat($scope.facture.items[i].prix)+parseFloat($scope.facture.items[i].tps)+parseFloat($scope.facture.items[i].tvq);
};
$scope.doCalculations = function(i) {
$scope.calculTvq(i);
$scope.calculTps(i);
$scope.calculGrandTotal(i);
}
});
and your HTML
<table class="table">
<thead>
<tr>
<th><strong>Description</strong></th>
<th class="text-right"><strong>Prix</strong></th>
<th class="text-right"><strong>TPS</strong></th>
<th class="text-right"><strong>TVQ</strong></th>
<th class="text-right"><strong>Grand Total</strong></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in facture.items">
<td class="bold" width="50%">
<input type="text" class="form-control" name="description" id="description" ng-model="item.description"></td>
<td class="text-right">
<input type="text" class="form-control" name="prix" id="prix" ng-model="item.prix" ng-change="doCalculations($index)></td>
<td class="text-right">
<input type="text" class="form-control" name="tps" id="tps" ng-model="item.tps"></td>
<td class="text-right">
<input type="text" class="form-control" name="tvq" id="tvq" ng-model="item.tvq"></td>
<td class="text-right">
<input type="text" class="form-control" name="grandtotal" id="grandtotal" ng-model="item.grandtotal">
</td>
</tr>
<tr>
<td class="bold"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right">Grand Total</td>
</tr>
</tbody>
</table>
https://docs.angularjs.org/api/ng/directive/ngRepeat
https://docs.angularjs.org/api/ng/directive/ngChange
UPDATE:
You should also use ngChange to call both calculation functions each time the 'prix' is updated