我的html文件中有这个：
<select ng-model="selectedCar" ng-change="changedValue(selectedCar)" ng-options="x.license for x in fhu.carList" >
<option value="">Select Car</option>
</select>
如何以及在哪里将更改的值函数放入控制器中？我对这个 Angular 和 JavaScript 有点新，所以一个具体的例子会很好。我的控制器在下面，下拉列表填充正在工作...几乎。但这是另一个问题，此时选择更改功能更重要。
(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=[];
})();
回答您的问题："在我的控制器中放置 changedValue 的什么位置" 你已经通过做ng-model="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 文档.ready
- 我删除了jquery .getJson并使用了angular的$http组件，它做了同样的事情。
- 我为您的http请求提供了服务。它基本上将请求包装在工厂/服务中，您可以在代码中的任何位置注入。因此，如果有其他控制器需要获取汽车列表。您可以注入汽车服务
看看 CarService.getCars(( 行。 getCars是一个名为CarService的工厂中的一个函数。我让它返回一个简单的承诺，你需要使用$http compnent(它被注释掉了(。
我只需返回承诺并将其解开到控制器中，然后将值放入我的 carList 变量中。当角度看到变量已更改时，它将为您更新视图。从选择列表中选择时也会发生同样的情况。因为您将ng-model="selectedCar"放在视图中，所以angular将为您更新模型。因此，您可以在控制器中使用它来执行某些操作。
在代码示例中，您可以看到无需将值传递到函数中。你可以只阅读$scope.selectedCar