我的 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函数放入我的 Controller 中？我对 Angular 和 JavaScript 有点陌生，所以一个具体的例子会很好。我的 Controller 位于下方，下拉列表填充正在工作... 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=[];
})();
最佳答案
回答你的问题:“在我的 Controller 中将changedValue放在哪里” 您已经通过执行 ng-model="selectedCar"获得了。 Angular 会为你更新它。因此，在您的 Controller 中，您可以执行 $scope.selectedCar 并获取从下拉列表中选择的汽车。
解释一下:
您正在混合 Angular 和 jquery。它不是被禁止的，但它并没有真正添加任何东西，并且可能会使事情变得复杂。他们对于如何操纵 View 有不同的策略。
Angular 具有双向绑定(bind)。文件准备好后，您无需聆听。这是 jquery 代码。 Angular 会自动为您更新范围和 View 。
在 angularJS 中使用此关键字可能会导致一些范围问题，请使用 $scope 代替。
您正在使用 jquery 的 $.getJSON 获取数据。您可以改用 Angular $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 并使用了 Angular 的 $http 组件，它做了同样的事情。
- 我为您的 http 请求提供了服务。它基本上将请求包装在工厂/服务中，您可以将其注入(inject)代码中的任何位置。因此，如果有另一个 Controller 需要获取汽车列表。您可以注入(inject) CarService
查看 CarService.getCars() 行。 getCars 是名为 CarService 的工厂中的一个函数。我让它返回一个简单的 promise ，您需要使用 $http 组件(已注释掉)。
我只是返回 promise 并将其在 Controller 中解开并将值放入我的 carList 变量中。当 Angular 发现变量发生变化时，它会为你更新 View 。当您从选择列表中进行选择时，也会发生同样的情况。因为您将 ng-model="selectedCar"放入 View 中，所以 Angular 将为您更新模型。因此，您可以在 Controller 中使用它来执行某些操作。
在代码示例中，您可以看到不需要将值传递到函数中。您只需阅读 $scope.selectedCar
关于javascript - 如何实现下拉列表更改事件捕获功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45387301/