AngularJS：如何在選擇事件中更改$ http.get中的url

我有customers.php文件，它會生成json數據。當我們在URL改變變量這樣

customers.php?var=5

在AngularJS我已經取得HTML文件有兩個獨立的部分JSON數據的清單正在發生變化。第一部分是具有特定值的選擇選項。第二部分是顯示json數據的部分。很明顯，第二部分使用$ http.get（url）其中url是customers.php？var = selected_number在控制器中。

當用戶在< select> ... </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;}); 

}; 

}]);

來源

2015-04-27 Pajsije

確定也在'ViewCController'控制器中？ –

是的，它的確如此。選擇選項位於ViewCController中。 – Pajsije

嘗試$ rootScope設置在控制器中的URL的可變部分，只要在UI（HTML頁）做出選擇（querypart）。

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

在發送$ http請求時將其追加到URL。如果我沒有正確理解這個要求，請告訴我。
我們已經知道，所有控制器都可以訪問$ rootScope，並且可以用於控制器和服務之間的較小數據傳輸。

來源

2015-04-27 07:33:56 jsNovice

這隻會初始化variableURL。我必須在每個選擇選項上自動創建variableURL。 – Pajsije

這是很好的例子[鏈接]（http://angular.github.io/angular-phonecat/step-7/app/#/phones），但我不知道如何在我的應用程序中實現。 – Pajsije

您可以使用$ scope。$ watch（）。請參閱文檔[這裏]（https://docs.angularjs.org/api/ng/type/$rootScope.Scope）。每當這個值發生變化並且調用你提供的回調函數時，這個事件就會被觸發，其中（回調函數）你可以使用上面的代碼。 – jsNovice

使用應該使用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; 
     }); 
    }; 

}]);

來源

2015-04-27 07:36:02 dfsq

它不起作用。當我把$ http.get函數放在$ scope.myChange中時，它不起作用。如果我放棄了$ http.get函數，它可以工作，但當用戶在ng模型中選擇選項時，我無法得到不同的json數據。 – Pajsije

我的意思是當我在$ scope.myChange中使用http.get函數時，我無法獲得json數據的列表。當http.get函數位於myChange的外部時，系統顯示列表的默認值爲json-data。 – Pajsije

我讀了你的問題。我認爲你有分離文件的問題。我想，因爲您使用的是AngularJS，所以您正在使用角度路由進行自動路由。所以，出於這個原因，你可能使用像main.html這樣的文件，其中包括customers.html和路由管理。如果在該文件中有路由發生時會顯示數據的機制，則當用戶單擊特定數據進行選擇時，數據將不會顯示在具有ng-controller的主文件中。（並非全部數據，只有處於myChange功能的數據）

此致敬禮。

來源

2015-04-28 06:37:05 Ignjat

是的，這是真的，但爲什麼而不是所有的數據，但只有在myChange函數中的數據。 – Pajsije

AngularJS：如何在選擇事件中更改$ http.get中的url

回答

相關問題