Question

您好我正在开发Angularjs应用程序。我有两个下拉列表框。每当我在第一个下拉列表中选择一些内容然后根据firstdropdown的值，第二个firstdropdown将加载（Cascading 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;
 });

也可能存在另一个原因，即所选的值相同，因此不会触发ng-change。如果它们不同，请检查您的选项值。

Answer 2

试试这个。当使用then获取响应时，它应该是这样的

response.data

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

Demo

Answer 3

其他人建议您使用$scope代替$rootScope

但是如果你必须将它用于其他存在（比如共享一个全局变量），那么你必须在视图中加上$root前缀

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

Angularjs ng-change没有开火

3 个答案: