Within my Single Page Application (SPA), I have implemented some intricate code. The initial step involves making a call to a service to retrieve data and binding it to a scope object. Below is an example of the code:
$scope.tables.outgoingCommunication = {
columns: OutgoingCommunicationModel.columns,
rows: []
};
$scope.getOutgoingDocs = () => {
myService.GetPrintHistory($scope.item.ItemId, $scope.item.ItemDesc, $scope.oDocAge).success((response) => {
$scope.tables.outgoingCommunication.rows = response.Response.body.Value;
});
};
In the HTML markup, the following code is used to bind the outgoingCommunication table:
<section ng-if="tables.outgoingCommunication.rows.length" table-directive="outgoingCommunication" rows="tables.outgoingCommunication.rows" columns="tables.outgoingCommunication.columns" sort-field="'DatePosted'" descending="true" parent-method="toggleAge()" table-template="Templates/app/items/Outgoing-Communication.html"></section>
The template includes the following structure:
I am fetching data from GetPrintHistory with JSON format as shown below:
{
FormNumber: "1060",
FormDescription: "Invoice",
PrintProcessId: 6440187,
DatePosted: "2014-12-20T00:00:00",
PrintXMLId: 5286992,
ItemImageNum: 26
}
A collection of these items is returned.
The model definition is as follows:
define(["require", "exports"], function (require, exports) {
var OutgoingCommunicationModel;
(function (OutgoingCommunicationModel) {
OutgoingCommunicationModel.columns = function () {
return [
{
field: "DatePosted",
title: "Date Posted",
columnSize: "col-sm-3",
allowTruncate: true,
sortable: true
},
{
field: "FormDescription",
title: "Description",
columnSize: "col-sm-3",
allowTruncate: false,
sortable: true
},
{
field: "Actions",
columnSize: "col-sm-3",
allowTruncate: false,
sortable: false
}
];
};
})(OutgoingCommunicationModel|| (OutgoingCommunicationModel= {}));
return OutgoingCommunicationModel;
});
Currently, the FormDescription column and DatePosted field are displayed correctly. However, there is an issue with the Actions column. I aim to configure the anchor link to invoke a service method defined as follows:
this.GetOutgoingDocument = function (itemId, itemImageNumber, printProcessId, printXmlId) {
return _this.$http({
method: "GET",
url: "api/item/GetOutgoingDocument",
params: { itemId: itemId, itemImageNumber: itemImageNumber, printProcessId: printProcessId, printXmlId: printXmlId }
});
};
I am struggling to integrate the call within the ng-repeat loop using ng-switch-when for the action column. If necessary, I can create a sample on CodePen or a similar platform. Any assistance or guidance would be greatly appreciated.