In my application, I am utilizing both AngularJS and Bootstrap 4 Accordion elements. Within each card of the accordion, there is system information displayed which includes a version number pulled from a systemData object array using ng-repeat. The version numbers are stored as text/varchar in a Postgres DB due to the potential presence of multiple decimal points (e.g., 6.3.1, 7.1.10, etc.).
To enhance functionality, I have implemented a JavaScript function within the Angular controller that is designed to show a specific image if the first character of the version string is "8". However, I encountered an issue where the browser seems to be passing the parameter as a number, causing the function to fail when the version has more than one decimal point by returning "NaN".
Below is the HTML code snippet:
<!-- Accordion-->
<div class="container">
<div id="allSystemsAccordion">
<div class="card" ng-repeat="system in systemData track by $index">
<div class="card-header" data-toggle="collapse" data-target="#systemsAccordionCollapse{{$index}}">
<img ng-show="isVersionEight({{system.version}})" ng-src="./images/logo.png" alt="logo" style="width:30px; border-radius:50%">
<a>{{system.version}}</a>
</div>
<div id="systemsAccordionCollapse{{$index}}" class="collapse" data-parent="#allSystemsAccordion">
<div class="card-body">
<a class="text-secondary">Version: </a><strong>{{system.version}}</strong><br>
<a class="text-secondary">Owner: </a><strong>{{system.owner}}</strong><br>
<a class="text-secondary">URL: </a><strong>{{system.url}}</strong><br>
</div>
</div>
</div>
</div>
The JavaScript Function in the Angular Controller:
$scope.isVersionEight = function(version) {
//actual logic will go here, but below is console statements for debugging for now.
console.log("FUNCTION VERSION AND TYPE: " + version + " " + typeof version + " toString(): " + version.toString() + " " + typeof version.toString());
};
Despite successful display of the version in the UI in other areas such as anchor tags and the card body section regardless of the number of decimal points present, the value of system.version is being treated as a number only within this particular function's parameter. This has raised questions on how to ensure it remains a string before reaching the function. Though converting it to a string within the function using toString() is an option, it does not resolve the issue as the argument passed is already "NaN".
An example screenshot showcasing an object in systemData:
https://i.sstatic.net/kOExW.png
Additionally, here is a screenshot depicting the output in the console when the function runs:
https://i.sstatic.net/tRoaN.png
The challenge lies in understanding why the system.version value is perceived as a number solely within this function's parameter. Are there methods to guarantee its recognition as a string prior to entering the function? Although a possible solution may involve implementing toString() within the function itself, given the existing condition where the argument is already "NaN", this approach proves futile.