AngularJS 在屏幕之间发送值
AngularJS sending values between screens
我正在使用 Onsen UI、Monaca 和 AngularJS 构建一个跨平台应用程序。
我有 2 个屏幕。第一个是用户必须输入调用 API 的车辆 ID。基于输入的车辆 ID,我想用这个值填充 API URL 并在下一个屏幕上显示所有选项的列表,这些选项作为 JSON 对象返回基于车辆编号。
例如 API 调用如下所示:mymadeupdomain/api/vehicle.php?id=109
其中 109 将是用户输入的 ID,以确定将在详细车辆屏幕上显示的内容。
我已经对这些值进行了硬编码,我可以读回返回的 JSON 对象,但我似乎无法在用户输入它们时发送这些值。
vehicle-id.html 从用户那里获取车辆id的形式
<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是处理表单校验的控制器
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;
});
});
如何获取在 $scope.fleetIDSearch = ""; 中输入的值在第一个屏幕中将它们传递给第二个屏幕中的 API URL?
我想显示与 ID 关联的所有检查的列表,如下所示 - 在 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>
您的案例有多个级别的多项选择。
如果你想简单地在控制器之间共享数据,你可以使用Factories
另一个解决方案是:
- 在您的第一页上管理一个 ng-model
- 提交表单后,重定向到一个看起来像 /content/:id
的 url
- 在路由器解析器中管理您的请求(获取远程数据)
- 直接在其他页面的othercontroller中取结果
我正在使用 Onsen UI、Monaca 和 AngularJS 构建一个跨平台应用程序。
我有 2 个屏幕。第一个是用户必须输入调用 API 的车辆 ID。基于输入的车辆 ID,我想用这个值填充 API URL 并在下一个屏幕上显示所有选项的列表,这些选项作为 JSON 对象返回基于车辆编号。
例如 API 调用如下所示:mymadeupdomain/api/vehicle.php?id=109
其中 109 将是用户输入的 ID,以确定将在详细车辆屏幕上显示的内容。
我已经对这些值进行了硬编码,我可以读回返回的 JSON 对象,但我似乎无法在用户输入它们时发送这些值。
vehicle-id.html 从用户那里获取车辆id的形式
<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是处理表单校验的控制器
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;
});
});
如何获取在 $scope.fleetIDSearch = ""; 中输入的值在第一个屏幕中将它们传递给第二个屏幕中的 API URL?
我想显示与 ID 关联的所有检查的列表,如下所示 - 在 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>
您的案例有多个级别的多项选择。
如果你想简单地在控制器之间共享数据,你可以使用Factories
另一个解决方案是:
- 在您的第一页上管理一个 ng-model
- 提交表单后,重定向到一个看起来像 /content/:id 的 url
- 在路由器解析器中管理您的请求(获取远程数据)
- 直接在其他页面的othercontroller中取结果