AngularJS：如何在选择事件上更改 $http.get 中的 url答案

【问题标题】：AngularJS: How to change url in $http.get on select eventAngularJS：如何在选择事件上更改 $http.get 中的 url
【发布时间】：2015-04-27 07:23:54
【问题描述】：

我有customers.php 文件，它产生json 数据。当我们像这样更改 url 中的变量时，json 数据列表正在更改

customers.php?var=5

在 AngularJS 中，我制作了包含两个单独部分的 html 文件。第一部分是具有特定值的选择选项。第二部分是显示 json 数据的部分。很明显，第二部分使用 $http.get(url)，其中 url 是控制器中的 customers.php?var=selected_number。

当用户在 ... select > html 文件中选择特定选项时，如何更改使用 $http.get 的控制器中的 url。

脚注：这是控制器文件的示例

var Pajsije = angular.module('CodeOverflow', ['ngRoute']);

    Pajsije.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/viewa', {
            templateUrl : 'viewa.html',
            controller  : 'ViewAController'
        })

        // route for the about page
        .when('/viewb', {
            templateUrl : 'viewb.html',
            controller  : 'ViewBController'
        })

        // route for the contact page
        .when('/viewc', {
            templateUrl : 'viewc.html',
            controller  : 'ViewCController'
        })
        .otherwise({
                redirectTo: '/viewa'
        });
});

// create the controller and inject Angular's $scope
Pajsije.controller('ViewAController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Good look!';
});

Pajsije.controller('ViewBController', function($scope) {
    $scope.message = 'Look about page.';
});

Pajsije.controller('ViewCController', ['$scope','$http', '$templateCache', function($scope, $http, $templateCache) {

    $scope.myChange = function() {

    $http({method: 'GET', url: '../json-data/customers.php?idstudm=12', cache: $templateCache}).success(function (response) {$scope.names = response.records;});

};

}]);

【问题讨论】：

是否选择也在ViewCController控制器中？
是的，确实如此。选择选项在 ViewCController 中。

标签： javascript php json angularjs

【解决方案1】：

每当在 UI（HTML 页面）中进行选择时（查询部分），尝试 $rootScope 在控制器中设置 URL 的可变部分。

$rootScope.variableURL = "customers.php?var=" + $scope.selected_number;

在发送 $http 请求时将其附加到 URL。如果我没有正确理解要求，请通知我。
我们已经知道 $rootScope 可以跨所有控制器访问，并且可以用于跨控制器和服务传输较小的数据。

【讨论】：

这只会初始化 variableURL。我必须在每个选择选项上自动创建 variableURL。
这是一个很好的例子link，但我不知道如何在我的应用程序中实现。
你可以使用$scope.$watch()。请参阅文档here。每次值发生变化并调用您提供的回调函数时都会触发此事件，其中（回调函数）您可以使用上述代码。

【解决方案2】：

使用应该使用ngModel 指令将选择框绑定到范围模型，并在控制器中使用此模型。像这样的：

<select ng-model="number" ng-change="myChange()">
    <option value="3">3</option>
    <option value="3">10</option>
</select>

控制器：

Pajsije.controller('ViewCController', ['$scope', '$http', '$templateCache', function ($scope, $http, $templateCache) {

    $scope.myChange = function () {
        $http({
            method: 'GET',
            url: '../json-data/customers.php?idstudm=' + $scope.number,
            cache: $templateCache
        }).success(function (response) {
            $scope.names = response.records;
        });
    };

}]);

【讨论】：

它不起作用。当我将 $http.get 函数放入 $scope.myChange 时，它不起作用。如果我退出 $http.get 函数，它会起作用，但是当用户在 ng-model 中选择选项时，我无法获得不同的 json-data。
我的意思是当我在 $scope.myChange 中使用 http.get 函数时无法获取 json-data 列表。当 http.get 函数在 myChange 之外时，系统显示默认值为 json-data 的列表。

【解决方案3】：

我读了你的问题。我认为你有分离文件的问题。我猜，因为您使用的是 AngularJS，所以您使用 angular-route 进行自动路由。因此，出于这个原因，您可能正在使用 main.html 之类的文件，其中包含带有路由管理的 customers.html。如果在该文件中您有在路由发生时显示数据的机制，则当用户单击特定数据进行选择时，数据将不会显示在带有 ng-controller 的主文件中。（不是所有数据，只有 myChange 函数中的数据）

最好的问候。

【讨论】：

是的，确实如此，但为什么不是所有数据，而只是 myChange 函数中的数据。