AngularJS $ scope。$监视选择输入的属性ngModel

时间:2015-02-16 09:52:10

标签: javascript angularjs

我有一个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>

这里是我的角色代码:

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:加载页面后,合同对象将包含很多其他字段。

1 个答案:

答案 0 :(得分:9)

如果您希望在该值发生变化时触发某个功能,我建议您在控制器上使用ng-change代替手表,这就是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>