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中取结果