AngularJS ng-change不觸發

Question

嗨，我正在開發Angularjs應用程序。 我有兩個下拉列表框。 每當我在第一個下拉列表中選擇某項然后基於firstdropdown的值時，第二個firstdropdown就會加載（級聯dropdownlistbox）。 我正在使用Ajax調用將數據綁定到dropdownlist。 以下是我的index.html，其中有兩個dropdownlistboxe。

<select ng-model="selectedMake" ng-options="b for b in list" id="brand" ng-change="getModel(selectedMake)">
 <option value="">-- Select a Make --</option>
 </select>
 <select ng-model="selectedModel" ng-options="b for b in Modellist" id="brand">
 <option value="">-- Select a Model --</option>
 </select>

這是我的控制器代碼。 var arrMakes = new Array（）;

$http.get("http://localhost:4739/api/AutoLease/GetVehicleMake").success(function (data) {
        $.map(data, function (item) {
            arrMakes.push(item.MakeName);
        });
        $rootScope.list = arrMakes;
    }).error(function (status) {
    });
    $rootScope.getModel = function (selectedMake) {
        debugger;
        var arrModel = new Array();
        $http.get(url + 'api' + '/AutoLease/' + selectedMake + '/GetVehicleModel').then(function (response) {
            $.map(data, function (item) {
                arrModel.push(item.ModelName);
            });
            $rootScope.Modellist = arrModel;
        });
    }

我能夠加載第一個下拉菜單。 在第一個下拉菜單中，我在ng-change事件中具有getModel函數。 此事件未觸發。 我也沒有收到任何錯誤消息。 我可以知道我在這里想念的東西嗎？ 提前致謝。

Answer 1

使用$ scope代替$ rootScope

$scope.getModel = function (selectedMake) {
        debugger;
        var arrModel = new Array();
        $http.get(url + 'api' + '/AutoLease/' + selectedMake + '/GetVehicleModel').then(function (response) {
            $.map(data, function (item) {
                arrModel.push(item.ModelName);
            });
            $rootScope.Modellist = arrModel;
 });

也可能還有另一個原因，那就是selected的值是相同的，因此不會觸發ng-change。 檢查選項值是否不同。

Answer 2

嘗試這個。 當使用then獲得響應時，應該是這樣的

響應數據

 $http.get(url + 'api' + '/AutoLease/' + selectedMake + '/GetVehicleModel').then(function (response) {
        $.map(response.data, function (item) {
            arrModel.push(item.ModelName);
        });
        $rootScope.Modellist = arrModel;
    });

演示版

Answer 3

其他建議您使用$scope而不是$rootScope

但是，如果您必須將其用於其他存在（例如共享全局變量），則必須在視圖中以$root

<select ng-model="selectedMake" ng-options="b for b in list" id="brand" ng-change="$root.getModel(selectedMake)">