I'm currently working on a project that involves developing a cross-platform app using Onsen UI, Monaca, and AngularJS.
Within this app, I have 2 screens. The initial screen requires users to input a Vehicle ID, which triggers an API call. This API call fetches data based on the provided Vehicle ID, and then populates the API URL with this value. Subsequently, on the next screen, a list of options returned as a JSON object corresponding to the Vehicle ID is displayed.
For example, the API call structure is as follows: mymadeupdomain/api/vehicle.php?id=109
Here, 109 represents the ID entered by the user to determine the content displayed on the detailed vehicle screen.
Although I have hardcoded some values and can retrieve the JSON object returned by the API call, I'm encountering difficulty in dynamically sending the values when users enter them.
The form in vehicle-id.html retrieves the vehicle ID from the user:
<form class="login-form" style="text-align: center" name="myForm">
<section style="padding: 8px">
<input type="text"
class="text-input--underbar"
required
minlength="3"
maxlength="10"
ng-model-options="{ debounce : 800 }"
placeholder="Vehicle ID / Fleet Number"
ng-model="fleetIDSearch" >
</section>
</form>
The app.js file acts as the controller for processing the form submission:
angular.module("myApp", ['onsen']).controller("vehicleController", function($scope, $http)
{
// Watch for changes on the vehicle ID screen
$scope.$watch('fleetIDSearch', function()
{
fetchFleetDetails();
});
$scope.fleetIDSearch = "";
function fetchFleetDetails()
{
$http.get("http://mymadeupdomain/api/vehicle.php?id=" + $scope.fleetIDSearch).success(function(data)
{
$scope.fleetIDs = data;
});
}
// Retrieves a list of all Vehicle Checks associated with Vehicle ID
$http.get("http://mymadeupdomain/api/getfleetchecks.php?fleetid=" + $scope.fleetIDSearch).success(function(data) // NOT WORKING HERE
{
$scope.checkItemDescriptions = data;
});
});
My main challenge lies in passing the values entered in $scope.fleetIDSearch = ""; from the first screen to the second screen's API URL. How can I accomplish this seamlessly?
Ultimately, my goal is to showcase a comprehensive list of checks linked to the specified ID, as presented below (currently functional with hardcoded API URL):
vehicleCheck.html
<ul class="list">
<li class="list__item" ng-repeat="checkItemDescription in checkItemDescriptions">
{{checkItemDescription.checkitemdesc}}
<label class="switch switch--list-item">
<input type="checkbox"
class="switch__input"
checked >
<div class="switch__toggle"></div>
</label>
</li>
</ul>