I am building a cross platform app using Onsen UI, Monaca and AngularJS.
I have 2 screens. The first is where a user have to enter a Vehicle ID which calls an API. Based on the input Vehicle ID, I want to populate the API URL with this value and on the next screen display a list of all options that are returned as a JSON object based on the Vehicle ID.
E.g the API call looks as follows: mymadeupdomain/api/vehicle.php?id=109
Where 109 would be the ID the user enters to determine what will be displayed on the detailed vehicle screen.
I have hard-coded the values and I can read back the JSON object that is returned, but I cant seem to send the values for when the user enters them.
vehicle-id.html form that gets 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>
app.js is the controller for handling the form check
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;
});
}
// Returns a list of all Vehivle Checks associated with Vehicle ID
$http.get("http://mymadeupdomain/api/getfleetchecks.php?fleetid=" + $scope.fleetIDSearch).success(function(data) // NOT WORKING HERE
{
$scope.checkItemDescriptions = data;
});
});
How do I get values entered in $scope.fleetIDSearch = ""; in the first screen and pass them to the API URL in the second screen?
I want to display a list of all checks associated with the ID as per below - working when API URL is hard coded
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>
You have multiple choice in your case, at multiple levels.
If you want to simply share data between controllers, you can use Factories
Another solution is to: