Question

我的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=[];

    })();

Answer 1

回答你的问题：＆＃34;将changeValue放在我的控制器内的位置＆＃34; 你已经做过ng-model =＆＃34; selectedCar＆＃34;。 Angular会为您更新它。因此，在您的控制器中，您可以执行$ scope.selectedCar并获取从下拉列表中选择的汽车。

解释一下：

你正在混合角度和jquery。它不是被禁止的，但它并没有真正添加任何东西，可能会使事情复杂化。他们对如何操纵视图有不同的策略。
Angular有双向绑定。文档准备好后，您不需要收听。这是jquery代码。 Angular会自动为您更新范围和视图。
在angularJS中使用此关键字也会导致一些范围问题，请改用$ scope。
您使用jquery的$ .getJSON获取数据。您可以使用angular $ http组件。

我用一个有效的例子做了一个傻瓜：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＆＃39; s $ http组件，它做了同样的事情。
我为您的http请求提供了服务。它基本上将请求包装在工厂/服务器中，您可以在代码中的任何位置注入。因此，如果有另一个控制器需要获取汽车列表。您可以注入CarService

查看CarService.getCars（）行。 getCars是名为CarService的工厂中的函数。我让它返回一个简单的承诺，你需要使用$ http compnent（注释掉它）。

我只需返回promise并将其解包到控制器中并将值放入我的carList变量中。当angular看到变量已更改时，它将为您更新视图。从选择列表中选择时也会发生相同的情况。因为你把ng-model =＆＃34; selectedCar＆＃34;在您的视图中，angular将为您更新模型。因此，您可以在控制器中使用它来执行某些操作。

在代码示例中，您可以看到不需要将值传递给函数。你可以阅读$ scope.selectedCar

如何实现下拉列表更改事件捕获功能

1 个答案: