atawila atawila - 4 days ago 5
AngularJS Question

Table does not reload upon clicking element in another table

I need to refresh the second table upon clicking an element of the first table. The first table loads but the second one does not load its data when I click an element of the first table.

First table:

<div id="master-table" ng-controller="purchaseInvoiceController">
<table dir="rtl" width="500" border="2" style="background:#ddd;
summary="purpose/structure for speech output">

<colgroup width="33%" />
<colgroup id="colgroup" class="colgroup" align="center"
valign="middle" title="title" width="33%"
span="2" />
<thead>
<tr>
<th scope="col">Invoice No.</th>
<th scope="col">Amount</th>
<th scope="col">Date</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input type="text" name="addProduct" id="addProduct" ng-model="purchaseInvoice.purchaseInvoiceId"></td>
<td><input type="text" name="addProduct" id="addProduct" ng-model="purchaseInvoice.amount"></td>
<td><input type="text" name="addProduct" id="addProduct" ng-model="purchaseInvoice.dateInvoiced"></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr id="table-element" ng-repeat="purchaseInvoice in purchaseInvoices" ng-click="getLines(purchaseInvoice)">
<td>{{purchaseInvoice.purchaseInvoiceId}}</td>
<td>{{purchaseInvoice.amount}}</td>
<td>{{purchaseInvoice.dateInvoiced}}</td>
</tr>
</tbody>
</table>




Second Table body:

<tbody>
<tr id="table-element" ng-repeat="purchaseInvoiceLine in purchaseInvoiceLines">
<td>{{purchaseInvoiceLine.purchaseInvoiceId}}</td>
<td>{{purchaseInvoiceLine.purchaseInvoiceLineId}}</td>
</tbody>


The getLines() function runs when I click an element of the first table and the data is loaded in the JavaScript message I'm using for testing. However, the second table does not load its data upon clicking the master element. The AngularJS module is as follows:

angular.module('pu', []).controller('purchaseInvoiceController', ['$scope', '$http', function($scope, $http) {

var createURL = "http://localhost:8080/webapi/purchaseInvoices/create";
var updateURL = "http://localhost:8080/webapi/purchaseInvoices/update";
var allPurchaseInvoices = "http://localhost:8080/webapi/purchaseInvoices";
var lines = "http://localhost:8080/webapi/purchaseInvoices/1/lines";

$scope.purchaseInvoice = {};
$scope.purchaseInvoiceLine = {};
$scope.editBtn = false;

$http.get(allPurchaseInvoices).then(function(response) {
$scope.purchaseInvoices = response.data;
});

$scope.getLines = function(purchaseInvoice) {
$http.get('http://localhost:8080/webapi/purchaseInvoices/' + purchaseInvoice.purchaseInvoiceId + '/lines').then(function(json){
$scope.purchaseInvoiceLines = json.data;
alert('done! ' + $scope.purchaseInvoiceLines[0].lineAmount);
});
}

}]);

Answer

Your code looks good and I can't find any issues.

The one I want you to look at is whether your second table exists inside the following div which has the ng-controller,

<div id="master-table" ng-controller="purchaseInvoiceController">

Since, I can see the div id as "master-table", I suspect your second table may be outside the controller and in this case, it won't get refreshed.

If this is the case, then move the second table inside the above div and give a try.

If this is not the case, then post the entire html to look at further.

Also, if you declared your second controller as below then the module will be reinitialized and you will loose your first controller methods.

angular.module('pu', []).controller

If you need to use two or more controllers inside the same page then declare the module first with the second argument then use the same to all the controllers without a second parameter as below.

var app = angular.module('pu', []);
// without second parameter 
angular.module('pu').controller
Comments