My journey in creating my first Ionic app has been smooth so far. I am not well-versed in UI design, so I may not be implementing the best practices, but I am making progress nonetheless...
Within a template, I have encountered the following code snippet (simplified for clarity):
<ion-content class="padding">
<div ng-repeat="entry in entries">
<div class="list card item-remove-animate">
<a class="item item-divider">{{entry.name}}</a>
<a class="item item-body">
<b>Type:</b> {{entry.typeCode}}
</a>
</div>
</div>
</ion-content>
The issue I am facing is that the displayed `entry.typeCode` needs to be replaced with the corresponding type string. There is a function in my controller that performs this mapping, but I am unsure of how to call it.
var typeCodeMappings = {
"B" : "Bike",
"A" : "Auto",
"T" : "Train",
"P" : "Plane"
};
app.controller('EntriesCtrl', function($scope, $http) {
$scope.typeCodeToString = function(code) {
return typeCodeMappings[code];
}
$http.get("...queryUrl...").then(
function(response) {
$scope.entries = response.data.results;
},
function(reason) {
console.log("Failed reading entries, reason=" + reason);
}
);
}
I have searched extensively through the Ionic user guide but have not found a solution. I am aware that I can call JS functions bound to $scope in directives like `ng-Click="myFunction()"`, but I am unsure how to do so for displaying data. How can I call `typeCodeToString(entry.typeCode)` directly from the template?
It is important not only to call the function in the controller but also to pass in the appropriate `typeCode` for the current "entry" being iterated in the template.