how to do calculation in angularjs with wepapi in mvc

Hello Petaraj,

In html declare table using ng-repeat directive as shown below

<div ng-app="app">
<div ng-controller="app.invoice" class="container">
<table class="table table-condense">
<caption>Products Invoicecaption>
<thead>
<tr class="bg-primary">
<th>Nameth>
<th>Quantityth>
<th>Item Costth>
<th>Totalth>
tr>
thead>
<tbody>
<tr ng-repeat="item in items" ng-init="setTotals(item)">
<td>
{{item.name}}td>
<td>
<input type="number" class="form-control" ng-model="item.quantity" ng-change="setTotals(item)">
td>
<td>
<input type="number" class="form-control" ng-model="item.unitCost" ng-change="setTotals(item)">
td>
<td>{{item.total | number:0}}td>
tr>
tbody>
<tfoot>
tfoot>
table>
div>
div>

In javascript controller

var app = angular.module('app', []);
app.controller('app.invoice', ['$scope', invoice]);
function invoice($scope) {
$scope.items = [{
name: 'Baseball Bats',
quantity: 0,
unitCost: 0
}, {
name: 'Soccer Balls',
quantity: 0,
unitCost: 0
}, {
name: 'Baseball Gloves',
quantity: 0,
unitCost: 0
}];
$scope.total = 0;
$scope.setTotals = function(item){
if (item){
item.total = item.quantity * item.unitCost; }
}
}

Here name is the label with hard code value but you can put it into texbox as well as combox or dropdown for selecting it.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Suraj Kumar8y ago
Hello Petaraj,
In html declare table using ng-repeat directive as shown below
<div ng-app="app">
    <div ng-controller="app.invoice" class="container">
        <table class="table table-condense">
            <caption>Products Invoicecaption>
            <thead>
                <tr class="bg-primary">
                    <th>Nameth>
                    <th>Quantityth>
                    <th>Item Costth>
                    <th>Totalth>
                tr>
            thead>
            <tbody>
                <tr ng-repeat="item in items" ng-init="setTotals(item)">
                    <td>
                      {{item.name}}td>
                      <td>
                         <input type="number" class="form-control"  ng-model="item.quantity" ng-change="setTotals(item)">
                      td>
                    <td>
                      <input type="number" class="form-control"  ng-model="item.unitCost" ng-change="setTotals(item)">
                      td>
                    <td>{{item.total | number:0}}td>
                tr>
            tbody>
            <tfoot>

            tfoot>
        table>
    div>
div>
In javascript controller
var app = angular.module('app', []);
app.controller('app.invoice', ['$scope', invoice]);

function invoice($scope) {
    $scope.items = [{
        name: 'Baseball Bats',
        quantity: 0,
        unitCost: 0
    }, {
        name: 'Soccer Balls',
        quantity: 0,
        unitCost: 0
    }, {
        name: 'Baseball Gloves',
        quantity: 0,
        unitCost: 0
    }];

    $scope.total = 0;

    $scope.setTotals = function(item){
        if (item){
            item.total = item.quantity * item.unitCost;             }
    }
}
Here name is the label with hard code value but you can put it into texbox as well as combox or dropdown for selecting it.
0