javascript - AngularJS $scope.$watch 一个选择输入的属性 ngModel

Question

我有一个 AngularJS 应用程序，其表单由 python 后端生成。我的问题是在选择输入的 ngModel 更改时触发特定功能(监听器):

此处呈现的 html 代码:

<select id="id_vehicle" name="vehicle" ng-model="contract.vehicle" class="ng-valid ng-valid-parse ng-dirty ng-touched">
    <option value="" selected="selected">---------</option>
    <option value="1">Qashqai</option>
    <option value="2">X6</option>
</select>

这里是我的 Angular 代码:

contract_form_app.controller("mainCtrl", ['$scope', '$http', '$location', '$window', 'djangoForm', function($scope, $http, $location, $window, djangoForm) {

$scope.contract = {
    vehicle: ""
};

function loadVehicleInformation(oldValue, newValue) {
    // This only triggered one time !!!!.
    console.log("Selected vehicle " + $scope.contract.vehicle);
};

$scope.$watch('contract.vehicle', loadVehicleInformation());

当我在我的选择输入上选择另一个选项时，我的监听器函数不会触发...为什么？

ps:当页面加载完成后，contract对象会有很多其他字段。

Answer 1

如果你想在值改变时触发一个函数，我建议你使用 ng-change 而不是 Controller 上的 watch ，这就是 ng-change是为了。

<select id="id_vehicle" name="vehicle" ng-change="loadVehicleInformation()" ng-model="contract.vehicle" class="ng-valid ng-valid-parse ng-dirty ng-touched">
    <option value="" selected="selected">---------</option>
    <option value="1">Qashqai</option>
    <option value="2">X6</option>
</select>