我在HTML文件中有這樣的：如何實現下拉列表改變事件捕捉功能

<select ng-model="selectedCar" ng-change="changedValue(selectedCar)" ng-options="x.license for x in fhu.carList" > 
     <option value="">Select Car</option> 
</select>

如何以及在哪裏把我的控制器內的changedValue功能？我在這個Angular和JavaScript中有點新，所以一個具體的例子會很好。我的控制器在下面，下拉列表填寫正在工作... almost。但這是另一個問題，在這一點上，選擇更改功能更重要。

(function() { 
    var app = angular.module("fhu", []); 

    app.controller("FhuController", function(){ 

     this.carList = cars; 

    }); 


    $(document).ready(function(){ 

     var car = {}; 

     $.getJSON("fillingapi.php?action=get_cars",function(data){ 
      var i=0; 
      for(i=0;i<data.length;i++){ 

       cars.push({license: data[i].license, descr: data[i].descr});    

      } 
     }); 
    }); 

    var cars=[]; 

    })();

來源

2017-07-29 MikkoR

提起控制器讓我想，這是AngularJS嗎？如果是的話，請以AngularJS的名義適當地重新標記。角標籤保留給Angular 2+ – JGFMK

要回答你的問題：「如果把我的changedValue控制器內」你已經做NG-模型=「selectedCar」有。 Angular會爲你更新它。因此，在您的控制器中，您可以執行$ scope.selectedCar並從下拉列表中選擇車輛。

要稍微解釋一下：

你混合角和jQuery。這不是禁止的，但它並沒有真正添加任何東西，並可能使事情複雜化。他們對如何操作視圖有不同的策略。
Angular具有雙向綁定。文檔準備就緒時，您無需聆聽。這是jQuery代碼。 Angular會自動爲你更新範圍和視圖。
在angularJS中使用此關鍵字可能會導致一些作用域問題，請改用$ scope。
你用jquery的$ .getJSON獲取數據。您可以改用角度$ http組件。

我做了一個plunker與工作示例：https://plnkr.co/edit/1xqvFVTed9I7lJj9NkFH?p=preview

var app = angular.module('fhu', []); 

app.controller('FhuController', function($scope, CarService) { 
    $scope.selectedCar; 

    CarService.getCars().then(function(listOfCars) { 
     console.log(listOfCars); 
     $scope.carList = listOfCars; 
    }); 

    $scope.changedValue = function() { 
     alert('You just selected '+ $scope.selectedCar.licence); 
    }    
}); 

app.factory('CarService', function($http) { 

    const getCars = function() { 
    return $http.get('https://www.rantakallio.fi/fillherup/fillingapi.php?action=get_cars'); 
    }; 

    return { getCars }; 
});

讓我們通過代碼：

我刪除的功能包。
我刪除了jquery document.ready
我刪除了jquery .getJson並使用了角色的$ http組件，它做了同樣的事情。
我爲您的http請求提供了服務。它基本上將請求封裝在工廠/服務器中，您可以在代碼中的任意位置注入該請求。所以，如果有一個不需要的控制器需要獲取汽車列表。您可以注入CarService

看看CarService.getCars（）行。 getCars是一個名爲CarService的工廠中的函數。我讓它返回一個簡單的承諾，你需要使用$ http compnent（它的註釋掉）。

我只是返回承諾，並將其解包到控制器中，並將該值放到我的carList變量中。當角度發現變量已更改時，它將爲您更新視圖。從選擇列表中選擇時會發生同樣的情況。因爲您在視圖中放置了ng-model =「selectedCar」，angular會爲您更新模型。因此，您可以在您的控制器中使用它來執行某些操作。

在代碼示例中，您可以看到沒有必要將值傳遞給該函數。你可以只讀$ scope。選擇汽車

來源

2017-07-29 10:35:03 Bergur

好吧，大多數人都明白，但是... – MikkoR

...但是？打我:) – Bergur

好吧，主要是理解，但是...我的手指太快了:-) 1）我使用「許可證」，而不是「許可證」:-) 2）我的代碼（「你的代碼」上面）的API調用不起作用，下拉菜單保持爲空... 3）實際上，我的html文件中有類似的代碼，如下所示：

已選擇：{{selectedCar.license}}

4）也許我表達自己有點不清楚，但問題是在下拉選擇更改時執行另一個API調用。如何實現它？ – MikkoR

如何實現下拉列表改變事件捕捉功能

回答

已選擇：{{selectedCar.license}}

相關問題